He wonders if it is possible to change the properties of a complex SVG element with the help of JS or CSS, such as "scale", "transform" and others. It is necessary to apply to the element with the class 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>
  • If any of the suggested answers suit you, please accept it (checkbox to the left of the text). - Alexandr_TT
  • too shy to ask. Do you read the messages that come to you? - Alexandr_TT
  • one
    I read, how else. - Chamond

3 answers 3

Change the size and color of the star when you hover the cursor. The scale and translate transformation is used together. If you use only one scale command, the asterisk goes diagonally down and to the right, so we return it to the place-left and up with negative translateX(-200000px) translateY(-220000px) values 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>

Now I understand why they do not recommend using SVG files drawn in Corel. Just terrible numbers - hundreds of thousands of pixels and, accordingly, the size of the viewBox differs from viewport ten thousand times. Accordingly, the scale is 1: 10000 This is not a map of the country but just an icon :)

  • a) why not use the property transform-origin , so as not to shift back? b) transform has long been possible and necessary to write without prefixes - Sasha Omelchenko
  • @Sasha Omelchenko I really argue that this is possible. The counter question, and what prevented you from doing an example with the scale that the author of the question asked - Alexandr_TT
  • Do not take my question as a doubt in your competence, it was just interesting what caused such a decision. A scale did not, because I understood the question so that the scale was given solely for the example of transformations. - Sasha Omelchenko

The easiest way to use 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>

Through JS, you can also dynamically add the transform attribute with the desired values, but then you also have to determine the pivot point, which (in my opinion) is the purest hemorrhoids.

    Example:

     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>