Как изменить размер clip-path SVG?

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

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

Я изменил ширину и высоту (до 100), но изображение по-прежнему не масштабируется.
Просто остается того же размера. 

Codepen Demo

Здесь мой SVG код: 







    

Ответы

Ответ 1

Во-первых, когда вы устанавливаете атрибуты width и height на
велечину 100, это делает svg  высотой и широной 100px. Если вы
хотите, чтобы svg имела полную ширину, вам нужно установить 100% для
ширины.
Во-вторых,  вам нужно указать значение атрибута viewbox, чтобы
получить масштабирование и систему координат для элементов вашего
svg.


Здесь пример для viewbox="0 0 500 500" и width="30%"    



svg path {
fill:#EDEBEA;
}
#img1 {
height:500px;
width:500px;
clip-path:url(#svgPath);
}





Теперь увеличим размер в два раза: 

Ответ 2

Примеры анимации clip-path

Горизонтальное смещение  

Для этого используем команду анимации смещения по горизонтали:
  

values="0;450;450;0;0" перечисление позиций горизонтальной координаты "x" 

Одинаковые цифры - 450;450 обеспечивают паузу нахождения в этой позиции  

restart="whenNotActive защита от повторного запуска анимации    

Запуск анимации - клик по фигуре 



svg path {
fill:#EDEBEA;
}
#img1 {
height:500px;
width:500px;
clip-path:url(#svgPath);
}





Вертикальное смещение  

Для этого используем команду анимации смещения по вертикали:   

   



svg path {
fill:#EDEBEA;
}
#img1 {
height:500px;
width:500px;
clip-path:url(#svgPath);
}