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

476
07 февраля 2017, 22:14

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

<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="130px" height="130px" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
viewBox="0 0 1300000 1300000"
xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
        <style type="text/css">
            <![CDATA[
            .fil0 {fill: #AA377C}
            .fil2 {fill: white}
            .fil1 {fill: url(#id0)}
            .gear {fill: white}
            ]]>
        </style>
        <linearGradient id="id0" gradientUnits="userSpaceOnUse" x1="1.00142e+06" y1="485829" x2="1.31052e+06" y2="831415">
            <stop offset="0" style="stop-opacity:1; stop-color:#9C1D69"/>
            <stop offset="1" style="stop-opacity:1; stop-color:#AA377C"/>
        </linearGradient>
    </defs>
    <g id="Layer_x0020_1">
        <metadata id="CorelCorpID_0Corel-Layer"/>
        <circle class="fil0" cx="650000" cy="650000" r="649994"/>
        <path class="fil1" d="M480762 377157l97794 97747 30130 -52204c2220,-3721 6696,-5209 10677,-3721l43192 17350c8929,-6803 18732,-12649 29397,-17102l6425 -46050c650,-4087 4229,-7311 8610,-7311l69448 0c2327,0 4418,921 5977,2385l130 119 130 141 130 130 129 142 59067 59054 22051 -8858c3661,-1382 7724,-224 10110,2858l47 -47 402208 402208c-52547,189565 -188833,344311 -366539,421920l-437038 -437038c-3047,-3024 -6047,-6094 -9024,-9201 -99554,-103640 -160769,-244438 -160769,-399550 0,-18827 15271,-33933 33932,-33933l118759 0c9944,0 18838,4217 25027,10961z"/>
        <path class="fil2" d="M877737 790361c-41314,-60 -76723,-2091 -114069,-14433 -11716,-3721 -25122,-1016 -34452,8314l-59988 59114c-5610,5539 -13937,6709 -20870,2976 -86692,-46913 -167986,-128171 -215159,-214662 -3814,-6957 -2633,-15331 2989,-20988l59597 -59882c9343,-9330 12059,-22724 8315,-34440 -12555,-37996 -14433,-73972 -14433,-116231 0,-18827 -15106,-33933 -33932,-33933l-118759 0c-18661,0 -33932,15106 -33932,33933 0,318634 258221,576855 576843,576855 18838,0 33933,-15094 33933,-33932l0 -118759c0,-18649 -14799,-33661 -33378,-33944 -898,0 -1795,12 -2705,12z"/>
        <path class="gear" d="M818737 436896l44814 -18016c4012,-1553 8757,-24 10922,3914l36008 62329c2238,3816 1198,8708 -2202,11509l-38099 29746c1590,11644 1651,23361 98,35274l37952 29623c3425,2568 4440,7449 2190,11350l-35947 62292c-2263,3926 -7008,5480 -11008,3939l-44643 -18078c-9344,7241 -19655,12990 -30577,17503l-6788 47725c-697,4354 -4379,7583 -8855,7644l-71955 0c-4489,98 -8207,-3265 -8892,-7485l-6666 -47799c-11374,-4647 -20792,-10078 -30491,-17600l-44753 18114c-4000,1517 -8733,-12 -10922,-3963l-35984 -62304c-2177,-3926 -1198,-8708 2202,-11509l37916 -29746c-1468,-11534 -1639,-23349 -110,-35225l-37965 -29599c-3351,-2715 -4367,-7595 -2104,-11509l35959 -62292c2250,-3902 6996,-5455 11008,-3890l44630 18041c9382,-7228 19656,-12965 30566,-17515l6788 -47700c709,-4354 4366,-7571 8867,-7669l71955 12c4513,-85 8207,3254 8879,7510l6825 47835c11619,4758 20426,9895 30382,17539zm-144668 70793c-19960,34577 -8145,78767 26431,98740 34602,19973 78780,8109 98741,-26455 19973,-34589 8121,-78743 -26468,-98716 -34589,-19973 -78743,-8146 -98704,26431z"/>
    </g>
</svg>
Answer 1

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

.gear { 
  transition: all 1s; 
  transform-origin: 50% 50%; 
} 
 
svg:hover .gear { 
  -webkit-transform: rotate(1turn); 
  transform: rotate(1turn); 
}
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="130px" height="130px" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd" 
viewBox="0 0 1300000 1300000" 
xmlns:xlink="http://www.w3.org/1999/xlink"> 
    <defs> 
        <style type="text/css"> 
            <![CDATA[ 
            .fil0 {fill: #AA377C} 
            .fil2 {fill: white} 
            .fil1 {fill: url(#id0)} 
            .gear {fill: white} 
            ]]> 
        </style> 
        <linearGradient id="id0" gradientUnits="userSpaceOnUse" x1="1.00142e+06" y1="485829" x2="1.31052e+06" y2="831415"> 
            <stop offset="0" style="stop-opacity:1; stop-color:#9C1D69"/> 
            <stop offset="1" style="stop-opacity:1; stop-color:#AA377C"/> 
        </linearGradient> 
    </defs> 
    <g id="Layer_x0020_1"> 
        <metadata id="CorelCorpID_0Corel-Layer"/> 
        <circle class="fil0" cx="650000" cy="650000" r="649994"/> 
        <path class="fil1" d="M480762 377157l97794 97747 30130 -52204c2220,-3721 6696,-5209 10677,-3721l43192 17350c8929,-6803 18732,-12649 29397,-17102l6425 -46050c650,-4087 4229,-7311 8610,-7311l69448 0c2327,0 4418,921 5977,2385l130 119 130 141 130 130 129 142 59067 59054 22051 -8858c3661,-1382 7724,-224 10110,2858l47 -47 402208 402208c-52547,189565 -188833,344311 -366539,421920l-437038 -437038c-3047,-3024 -6047,-6094 -9024,-9201 -99554,-103640 -160769,-244438 -160769,-399550 0,-18827 15271,-33933 33932,-33933l118759 0c9944,0 18838,4217 25027,10961z"/> 
        <path class="fil2" d="M877737 790361c-41314,-60 -76723,-2091 -114069,-14433 -11716,-3721 -25122,-1016 -34452,8314l-59988 59114c-5610,5539 -13937,6709 -20870,2976 -86692,-46913 -167986,-128171 -215159,-214662 -3814,-6957 -2633,-15331 2989,-20988l59597 -59882c9343,-9330 12059,-22724 8315,-34440 -12555,-37996 -14433,-73972 -14433,-116231 0,-18827 -15106,-33933 -33932,-33933l-118759 0c-18661,0 -33932,15106 -33932,33933 0,318634 258221,576855 576843,576855 18838,0 33933,-15094 33933,-33932l0 -118759c0,-18649 -14799,-33661 -33378,-33944 -898,0 -1795,12 -2705,12z"/> 
        <path class="gear" d="M818737 436896l44814 -18016c4012,-1553 8757,-24 10922,3914l36008 62329c2238,3816 1198,8708 -2202,11509l-38099 29746c1590,11644 1651,23361 98,35274l37952 29623c3425,2568 4440,7449 2190,11350l-35947 62292c-2263,3926 -7008,5480 -11008,3939l-44643 -18078c-9344,7241 -19655,12990 -30577,17503l-6788 47725c-697,4354 -4379,7583 -8855,7644l-71955 0c-4489,98 -8207,-3265 -8892,-7485l-6666 -47799c-11374,-4647 -20792,-10078 -30491,-17600l-44753 18114c-4000,1517 -8733,-12 -10922,-3963l-35984 -62304c-2177,-3926 -1198,-8708 2202,-11509l37916 -29746c-1468,-11534 -1639,-23349 -110,-35225l-37965 -29599c-3351,-2715 -4367,-7595 -2104,-11509l35959 -62292c2250,-3902 6996,-5455 11008,-3890l44630 18041c9382,-7228 19656,-12965 30566,-17515l6788 -47700c709,-4354 4366,-7571 8867,-7669l71955 12c4513,-85 8207,3254 8879,7510l6825 47835c11619,4758 20426,9895 30382,17539zm-144668 70793c-19960,34577 -8145,78767 26431,98740 34602,19973 78780,8109 98741,-26455 19973,-34589 8121,-78743 -26468,-98716 -34589,-19973 -78743,-8146 -98704,26431z"/> 
    </g> 
</svg>

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

Answer 2

Пример:

svg { 
  transition: all 1s; 
  transform-origin: 50% 50%; 
} 
svg:hover { 
  fill: url(#bgh); 
  transform: rotate(1turn); 
} 
 
circle:hover { 
  fill: url(#bgh); 
}
<svg height="204" width="204"> 
  <defs> 
    <pattern id="bg" x="0" y="0" patternUnits="userSpaceOnUse" height="32" width="32"> 
      <image x="0" y="0" width="32" height="32" xlink:href="https://www.gravatar.com/avatar/9bd620150717350f66401d7f9590a8b2?s=32&d=identicon&r=PG"></image> 
    </pattern> 
    <pattern id="bgh" x="0" y="0" patternUnits="userSpaceOnUse" height="32" width="32"> 
      <image x="0" y="0" width="32" height="32" xlink:href="https://www.gravatar.com/avatar/cbfaff96665b7567defe1b34a883db8b?s=32&d=identicon&r=PG"></image> 
    </pattern> 
  </defs> 
  <circle cx="102" cy="102" r="100" stroke="black" stroke-width="3" fill="url(#bg)" /> 
</svg>

Answer 3

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

<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="130px" height="130px" version="1.1"  
viewBox="0 0 1300000 1300000" 
xmlns:xlink="http://www.w3.org/1999/xlink" > 
    <defs> 
        <style type="text/css"> 
             
            .fil0 {fill: #AA377C} 
            .fil2 {fill: white} 
            .fil1 {fill: url(#id0)} 
            .gear {fill: white} 
			 .gear:hover{ 
   -webkit-transform: scale(1.5,1.5)  translateX(-200000px) translateY(-220000px) ;  
   	transform: scale(1.5,1.5)  translateX(-200000px) translateY(-220000px) ;  
   -o-transform: scale(1.5,1.5)  translateX(-200000px) translateY(-220000px) ;  
   -moz-transform:  scale(1.5,1.5)  translateX(-200000px) translateY(-220000px);  
   -ms-transform: scale(1.5,1.5)  translateX(-200000px) translateY(-220000px);  
    cursor:move; 
  	 fill:gold; 
	 } 
            
        </style> 
        <linearGradient id="id0" gradientUnits="userSpaceOnUse" x1="1.00142e+06" y1="485829" x2="1.31052e+06" y2="831415"> 
            <stop offset="0" style="stop-opacity:1; stop-color:#9C1D69"/> 
            <stop offset="1" style="stop-opacity:1; stop-color:#AA377C"/> 
        </linearGradient> 
    </defs> 
    <g id="Layer_x0020_1"> 
        <metadata id="CorelCorpID_0Corel-Layer"/> 
        <circle class="fil0" cx="650000" cy="650000" r="649994"/> 
        <path class="fil1" d="M480762 377157l97794 97747 30130 -52204c2220,-3721 6696,-5209 10677,-3721l43192 17350c8929,-6803 18732,-12649 29397,-17102l6425 -46050c650,-4087 4229,-7311 8610,-7311l69448 0c2327,0 4418,921 5977,2385l130 119 130 141 130 130 129 142 59067 59054 22051 -8858c3661,-1382 7724,-224 10110,2858l47 -47 402208 402208c-52547,189565 -188833,344311 -366539,421920l-437038 -437038c-3047,-3024 -6047,-6094 -9024,-9201 -99554,-103640 -160769,-244438 -160769,-399550 0,-18827 15271,-33933 33932,-33933l118759 0c9944,0 18838,4217 25027,10961z"/> 
        <path class="fil2" d="M877737 790361c-41314,-60 -76723,-2091 -114069,-14433 -11716,-3721 -25122,-1016 -34452,8314l-59988 59114c-5610,5539 -13937,6709 -20870,2976 -86692,-46913 -167986,-128171 -215159,-214662 -3814,-6957 -2633,-15331 2989,-20988l59597 -59882c9343,-9330 12059,-22724 8315,-34440 -12555,-37996 -14433,-73972 -14433,-116231 0,-18827 -15106,-33933 -33932,-33933l-118759 0c-18661,0 -33932,15106 -33932,33933 0,318634 258221,576855 576843,576855 18838,0 33933,-15094 33933,-33932l0 -118759c0,-18649 -14799,-33661 -33378,-33944 -898,0 -1795,12 -2705,12z"/> 
        <path class="gear" d="M818737 436896l44814 -18016c4012,-1553 8757,-24 10922,3914l36008 62329c2238,3816 1198,8708 -2202,11509l-38099 29746c1590,11644 1651,23361 98,35274l37952 29623c3425,2568 4440,7449 2190,11350l-35947 62292c-2263,3926 -7008,5480 -11008,3939l-44643 -18078c-9344,7241 -19655,12990 -30577,17503l-6788 47725c-697,4354 -4379,7583 -8855,7644l-71955 0c-4489,98 -8207,-3265 -8892,-7485l-6666 -47799c-11374,-4647 -20792,-10078 -30491,-17600l-44753 18114c-4000,1517 -8733,-12 -10922,-3963l-35984 -62304c-2177,-3926 -1198,-8708 2202,-11509l37916 -29746c-1468,-11534 -1639,-23349 -110,-35225l-37965 -29599c-3351,-2715 -4367,-7595 -2104,-11509l35959 -62292c2250,-3902 6996,-5455 11008,-3890l44630 18041c9382,-7228 19656,-12965 30566,-17515l6788 -47700c709,-4354 4366,-7571 8867,-7669l71955 12c4513,-85 8207,3254 8879,7510l6825 47835c11619,4758 20426,9895 30382,17539zm-144668 70793c-19960,34577 -8145,78767 26431,98740 34602,19973 78780,8109 98741,-26455 19973,-34589 8121,-78743 -26468,-98716 -34589,-19973 -78743,-8146 -98704,26431z"/> 
    </g> 
</svg> 
 
 

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

READ ALSO
Как сделать эффект растущей цены (на подобие таймера)?

Как сделать эффект растущей цены (на подобие таймера)?

На странице указана цена 126 рублей 00 копеекНужно эту цену каждую минуту увеличивать на 1 рубль

443
Как изменить функционал виджета datepicker-a в jQuery UI?

Как изменить функционал виджета datepicker-a в jQuery UI?

Использую виджет Datepicker из jQuery UI, там помимо выставления даты выставляю и времяВремя там выставляется ползунками

471
Не работает плагин onScreen

Не работает плагин onScreen

Использую плагин onScreen для смены фона при скролле внутри блока, на сайте плагина все работает: http://silvestrehgithub

467
Закрытие элемента по клику на кнопку

Закрытие элемента по клику на кнопку

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

466