SVG: border outline для группы элементов

#html #css #css3 #svg #анимация

Я хотел бы добавить границу для элементов, которые сгруппированы. 

В качестве примера: 


  
  



При наилучшем варианте, граница должна выглядеть, как рисунке.
Расстояние между элементами и границей не требуется (но лучше её иметь).
Основной целью должна быть единая граница  вокруг элементов группы.     

   

Я нашел изображение в учебнике, но там  просто продемонстрировано, как может выглядеть
группа элементов. Так что, это не помогает.    

Я уже пробовал разные решения, но ни одно из них не работает, как ожидалось, например: 


Фильтр SVG с использованием feColorMatrix и feMorphology (см.
этот пост). Но в этом случае цвет элементов изменяется при применении
фильтра.
Стилизация с stroke и stroke-width приводит к прямоугольной рамке
вокруг группы, что тоже не то, что я хочу.    


Какие есть идеи, как получить границу вокруг группы, как показано на картинке? 
    

Ответы

Ответ 1

Трудно получить dashed stroke, показанную на картинке, которую вы предоставили. Но
сплошной контур сделать возможно. 

Вот пример:  








Ниже, как это работает:   

    

Фильтр feMorphology использует dilate (расширенную) операцию для  утолщения графических
элементов.       

Используется исходный альфа канал в качестве входного изображения, это приводит к
появлению черных областей, соответствующих графическим элементам изображения, и белого
цвета в остальных частях.    

   

Используя  тот же фильтр снова, но с большим количеством dilation, что приводит к
слегка более плотному изображению, и это приводит к появлению черных областей, соответствующих
графическим элементам изображения, и белого цвета в остальных частях.    

 

Эти расширенные результаты объединяются с использованием операции XOR, которая оставляет
черный контур.     

  

Этот фильтр умножает альфа-компонент контура на 0,3, поэтому он выглядит серым, а
не сплошным черным.  

   

Наконец, добавьте этот вывод в исходное изображение.   

Источник: SVG: border outline for group of elements @squeamish ossifrage
  
Прим. переводчика   

На мой взгляд эта тема интересна, открывает широкие горизонты для творчества и может
иметь практическое применение.     


применение группы фильтров дает возможность получить контур любой
сложности без применения патчей и стандартных команд обводки
Изменяя параметры фильтра feColorMatrix можно  получить практически любой цвет контура     
применение фильтра feMorphology позволяет изменять ширину обводки и
зазор между основной фигурой и обводкой


Пример получения зелёного контура  

Для этого выставляем параметры фильтра  feColorMatrix 

  






     

Пример получения красного контура с расширением обводки  

Для этого расширяем радиус действия у фильтра    

     








Пример изменения контура при изменении набора внутренних фигур  

Просто добавим в группу элементов вторую линию и посмотрим как автоматически изменится
обводка, формируемая фильтрами    






Ответ 2

Примеры анимации контуров сформированных фильтрами


Анимация контура при изменении длины внутренней линии 


Команда на изменение длины линии: 

  
     
 


Изменяется только конфигурация линии, а контур автоматически отслеживает эти изменения 









Анимация изменения ширины строки 


Для этого добавляется команда анимации изменения ширины строки от 4px до 90px

 
      
     


Начало анимации - клик по фигуре









Анимация вращения линии    


Добавляются две команды анимации: изменение длины линии и вращение линии: 


       
    

  










Анимация stroke-dasharray  

 
  
 











Анимация stroke-width, stroke-dasharray 

 












Пример построения графика  


Используется анимация увеличения вертикальных линий и автоматически формируемая фильтрами
рамка.