Интересует, можно ли как-то при помощи 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>
Проще всего при помощи 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
с нужными значениями, но тогда также придется определять точку вращения, что (по-моему) — чистейший геморрой.
Пример:
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>
Изменение размеров и цвета звёздочки при наведении курсора. Используется совместно трансформация 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 Это же не карта страны а всего лишь иконка :)
Кофе для программистов: как напиток влияет на продуктивность кодеров?
Рекламные вывески: как привлечь внимание и увеличить продажи
Стратегії та тренди в SMM - Технології, що формують майбутнє сьогодні
Выделенный сервер, что это, для чего нужен и какие характеристики важны?
Современные решения для бизнеса: как облачные и виртуальные технологии меняют рынок
На странице указана цена 126 рублей 00 копеекНужно эту цену каждую минуту увеличивать на 1 рубль
Использую виджет Datepicker из jQuery UI, там помимо выставления даты выставляю и времяВремя там выставляется ползунками
Использую плагин onScreen для смены фона при скролле внутри блока, на сайте плагина все работает: http://silvestrehgithub
Доброго времени суток, вообщем сложилась такая ситуация, есть 3 кнопки по нажатию на кнопку, открывается определенное поле формы, нужно чтобы...