CSS-свойства SVG-изображения

#javascript #css #svg #path

Интересует, можно ли как-то при помощи JS или CSS менять свойства сложного SVG-элемента,
такие как "scale", "transform" и другие. Нужно применить к элементу с классом gear



    

Ответы

Ответ 1

Изменение размеров и цвета звёздочки при наведении курсора. Используется совместно
трансформация scale и translate. Если использовать только одну команду  scale звездочка
уйдет по диагонали вниз и вправо, поэтому возвращаем 
её на место -влево и вверх   отрицательными значениями translateX(-200000px) translateY(-220000px)





 




Теперь я понимаю, почему не рекомендуют использовать файлы SVG, нарисованные в Corel.
Просто жуткие цифры - сотни тысяч пикселей и соответственно размеры 
viewBox отличаются от viewport в десять тысяч раз. Соответственно масштаб 1:10000
Это же не карта страны а всего лишь иконка :)


Ответ 2

Проще всего при помощи CSS:



.gear {
  transition: all 1s;
  transform-origin: 50% 50%;
}

svg:hover .gear {
  -webkit-transform: rotate(1turn);
  transform: rotate(1turn);
}





Через JS также можно динамически добавлять атрибут transform с нужными значениями,
но тогда также придется определять точку вращения, что (по-моему) — чистейший геморрой.


Ответ 3

Пример:



svg {
  transition: all 1s;
  transform-origin: 50% 50%;
}
svg:hover {
  fill: url(#bgh);
  transform: rotate(1turn);
}

circle:hover {
  fill: url(#bgh);
}