英文:
Transform scale not working on SVG element
问题
我想要为一个标志添加动画效果，并尝试使用不同的CSS属性来体验我想要进行的过渡类型。我尝试对元素进行缩放，但当我尝试时，它们就从组中消失了。最初，我尝试对包含在<g>标签内的一组元素进行缩放，当那不起作用时，我想也许是缩放<g>标签存在问题，然后尝试对单个元素进行缩放，但结果相同。
以下是我的代码：
SVG
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
class="srcryBox logo" viewBox="0 0 284.944733 53.042027">
<style type="text/css">
.st0{fill:#D7C99F;}
.st1{fill:#AEAEAE;}
.st2{fill:none;}
</style>
<defs>
<clipPath id="marcusMask">
<polygon points="105.300941,0 0,0 0,31.323288 115.145195,31.323288 "/>
</clipPath>
<clipPath id="wielandMask">
<polygon points="163.602234,21.718739 284.944733,21.718739 284.944733,53.042027
154.397278,53.042027 "/>
</clipPath>
</defs>
<g id="wielandGroupContainer">
<g id="wielandGroup">
<path id="wieland-i" class="st0" d="M167.61824,24.045807h4.469254v4.469761h-4.469254V24.045807z M167.61824,50.117817V31.49474h4.469254
v18.623077H167.61824z"/>
<path id="wieland-e" class="st0" d="M195.96196,43.125149c0.173462-0.694904,0.260712-1.439949,0.260712-2.23513
c0-1.364742-0.2547-2.644253-0.764099-3.836521c-0.509399-1.191269-1.210327-2.234131-2.103775-3.128582
c-0.894455-0.893452-1.937302-1.595375-3.128571-2.103771c-1.192276-0.509398-2.471786-0.764095-3.836533-0.764095
c-1.365738,0-2.644241,0.254698-3.836517,0.764095c-1.192276,0.508396-2.235138,1.21032-3.128586,2.103771
c-0.894455,0.894451-1.595367,1.937313-2.104767,3.128582c-0.509399,1.192268-0.763092,2.471779-0.763092,3.836521
c0,1.340675,0.253693,2.607151,0.763092,3.799419c0.509399,1.191269,1.210312,2.234131,2.104767,3.128582
c0.893448,0.893452,1.93631,1.595375,3.128586,2.103771c1.192276,0.509396,2.470779,0.764095,3.836517,0.764095
c1.490097,0,2.867874-0.291801,4.134338-0.875401c1.266479-0.583603,2.346436-1.396832,3.239899-2.439693l-4.655777-1.862106
c-0.794174,0.472298-1.700668,0.707943-2.71846,0.707943c-0.720978,0-1.402847-0.13036-2.048615-0.391075
c-0.645767
<details>
<summary>英文:</summary>
I want to animate a logo and am playing with different CSS properties to get a feel for the types of transitions I want to shift to and from. I tried to scale my elements and they just disappear from the group when I attempt to do it. I initially attempted to scale a group of elements inside a `<g>` tag and when that didn't work I figured maybe there's an issue with scaling `<g>` tags and tried on an individual element just to get the same result.
Here's my code
***svg***
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
class="srcryBox logo" viewBox="0 0 284.944733 53.042027">
<style type="text/css">
.st0{fill:#D7C99F;}
.st1{fill:#AEAEAE;}
.st2{fill:none;}
</style>
<defs>
<clipPath id="marcusMask">
<polygon points="105.300941,0 0,0 0,31.323288 115.145195,31.323288 "/>
</clipPath>
<clipPath id="wielandMask">
<polygon points="163.602234,21.718739 284.944733,21.718739 284.944733,53.042027
154.397278,53.042027 "/>
</clipPath>
</defs>
<g id="wielandGroupContainer">
<g id="wielandGroup">
<path id="wieland-i" class="st0" d="M167.61824,24.045807h4.469254v4.469761h-4.469254V24.045807z M167.61824,50.117817V31.49474h4.469254
v18.623077H167.61824z"/>
<path id="wieland-e" class="st0" d="M195.96196,43.125149c0.173462-0.694904,0.260712-1.439949,0.260712-2.23513
c0-1.364742-0.2547-2.644253-0.764099-3.836521c-0.509399-1.191269-1.210327-2.234131-2.103775-3.128582
c-0.894455-0.893452-1.937302-1.595375-3.128571-2.103771c-1.192276-0.509398-2.471786-0.764095-3.836533-0.764095
c-1.365738,0-2.644241,0.254698-3.836517,0.764095c-1.192276,0.508396-2.235138,1.21032-3.128586,2.103771
c-0.894455,0.894451-1.595367,1.937313-2.104767,3.128582c-0.509399,1.192268-0.763092,2.471779-0.763092,3.836521
c0,1.340675,0.253693,2.607151,0.763092,3.799419c0.509399,1.191269,1.210312,2.234131,2.104767,3.128582
c0.893448,0.893452,1.93631,1.595375,3.128586,2.103771c1.192276,0.509396,2.470779,0.764095,3.836517,0.764095
c1.490097,0,2.867874-0.291801,4.134338-0.875401c1.266479-0.583603,2.346436-1.396832,3.239899-2.439693l-4.655777-1.862106
c-0.794174,0.472298-1.700668,0.707943-2.71846,0.707943c-0.720978,0-1.402847-0.13036-2.048615-0.391075
c-0.645767-0.260712-1.22937-0.651787-1.750809-1.173218c-0.47229-0.447224-0.832275-0.95562-1.079956-1.527187h9.758774
H195.96196z M182.590271,37.090599c1.093002-1.042862,2.358475-1.564293,3.799423-1.564293
c1.490097,0,2.755569,0.521431,3.798416,1.564293c0.472305,0.472294,0.832291,0.993725,1.080978,1.564289h-9.758774
C181.757996,38.084324,182.117981,37.562893,182.590271,37.090599z"/>
<rect id="wieland-l" x="200.691956" y="24.129538" class="st0" width="4.469258" height="26.07201"/>
<path id="wieland-a" class="st0" d="M229.296417,31.541367v18.660179h-4.469269v-9.311539c0-1.490086-0.521423-2.756561-1.565292-3.799419
c-1.042862-1.042862-2.308334-1.564293-3.798416-1.564293c-0.720978,0-1.409866,0.137379-2.067673,0.410126
c-0.657806,0.27375-1.235382,0.657806-1.73175,1.154167c-1.042862,1.042858-1.564285,2.309334-1.564285,3.799419
c0,1.465019,0.521423,2.71946,1.564285,3.762321c0.496368,0.521427,1.073944,0.912502,1.73175,1.173218
s1.346695,0.391071,2.067673,0.391071c0.745041,0,1.414886-0.12434,2.01152-0.373024l1.601395,3.985935
c-1.143143,0.570564-2.470779,0.856346-3.985931,0.856346c-1.365753,0-2.625198-0.254696-3.78038-0.764095
c-1.15416-0.508392-2.1539-1.21032-2.998215-2.103771c-0.844315-0.894451-1.502121-1.937313-1.973419-3.128578
c-0.47229-1.192272-0.707932-2.458744-0.707932-3.799423c0-1.364742,0.235641-2.644253,0.707932-3.836521
c0.471298-1.191269,1.129105-2.234127,1.973419-3.128582c0.844315-0.893452,1.844055-1.595375,2.998215-2.103769
c1.155182-0.509398,2.414627-0.764097,3.78038-0.764097c1.216324,0,2.297302,0.186512,3.240891,0.558533
c0.943588,0.373024,1.774857,0.844315,2.495834,1.415882v-1.490086H229.296417z"/>
<path id="wieland-n" class="st0" d="M243.337921,31.057037c1.216339,0,2.321365,0.229631,3.315094,0.68889
c0.992722,0.46026,1.844055,1.092997,2.550995,1.900213c0.707947,0.807213,1.25444,1.744785,1.639496,2.81171
c0.384064,1.067928,0.576584,2.21006,0.576584,3.426399v10.317295h-4.469254V39.884251
c0-1.241405-0.434189-2.272232-1.303574-3.09148c-0.844315-0.843315-1.862106-1.266476-3.054382-1.266476
c-1.216339,0-2.247162,0.423161-3.091476,1.266476c-0.844315,0.844315-1.265472,1.875141-1.265472,3.09148v10.317295h-4.470261
V31.578468h4.470261v1.415882c0.66983-0.571568,1.42691-1.036842,2.271225-1.39683S242.295059,31.057037,243.337921,31.057037z"/>
<path id="wieland-d" class="st0" d="M275.518188,24.121014v26.109615h-4.470276v-9.311543c0-1.514153-0.521423-2.780624-1.56427-3.799419
c-1.042877-1.042862-2.296295-1.564289-3.761322-1.564289c-1.490082,0-2.756561,0.521427-3.799408,1.564289
c-1.042877,1.042858-1.564301,2.309334-1.564301,3.799419c0,1.465019,0.521423,2.71946,1.564301,3.762321
c0.496338,0.521431,1.073944,0.912502,1.73175,1.173218c0.657776,0.260715,1.34668,0.391071,2.067657,0.391071
c0.719971,0,1.377777-0.12434,1.973419-0.373024l1.602386,3.985935c-1.143127,0.570564-2.45874,0.856346-3.948822,0.856346
c-1.365753,0-2.625214-0.254696-3.780365-0.764095c-1.154175-0.508392-2.153931-1.21032-2.99823-2.103771
c-0.84433-0.894451-1.502136-1.937313-1.973419-3.128578c-0.47229-1.192272-0.707947-2.458744-0.707947-3.799423
c0-1.364742,0.235657-2.644253,0.707947-3.836521c0.471283-1.191269,1.129089-2.234127,1.973419-3.128582
c0.844299-0.893452,1.844055-1.595375,2.99823-2.103769c1.155151-0.509398,2.414612-0.764095,3.780365-0.764095
c1.192261,0,2.259186,0.18651,3.203766,0.558531c0.943604,0.373024,1.774872,0.844315,2.494843,1.415882v-8.939518H275.518188z"/>
</g>
</g>
<g id="marcusGroupContainer">
<g id="marcusGroup">
<path id="marcus-a" class="st1" d="M89.270348,25.261642v-1.489586c0.720474,0.570566,1.551758,1.04236,2.495346,1.414881
c0.943588,0.372522,2.023552,0.558533,3.239883,0.558533c1.365746,0,2.625702-0.2547,3.780373-0.763094
c1.154167-0.509398,2.153908-1.21032,2.997719-2.104271c0.844315-0.893951,1.502625-1.936811,1.973915-3.128582
c0.471794-1.191769,0.707443-2.470776,0.707443-3.83602c0-1.340677-0.235649-2.606649-0.707443-3.798418
c-0.471291-1.191769-1.129601-2.23463-1.973915-3.128581c-0.843811-0.893952-1.843552-1.595376-2.997719-2.104272
c-1.154671-0.508394-2.414627-0.763594-3.780373-0.763594c-1.514153,0-2.842796,0.285784-3.984924,0.85685l1.601387,3.98493
c0.596138-0.248682,1.266479-0.372522,2.011017-0.372522c0.720474,0,1.40937,0.130358,2.067169,0.391073
c0.657806,0.260715,1.23539,0.651788,1.73175,1.173218c1.042862,1.04286,1.564293,2.296298,1.564293,3.761316
c0,1.489585-0.521431,2.756059-1.564293,3.798919c-0.496361,0.496363-1.073944,0.880917-1.73175,1.154667
c-0.657799,0.272749-1.346695,0.409624-2.067169,0.409624c-1.489586,0-2.756058-0.521429-3.798416-1.564291
c-1.042862-1.04286-1.564293-2.309334-1.564293-3.798919V6.602966h-4.469254v18.658676H89.270348z"/>
<path id="marcus-r" class="st1" d="M75.862572,23.771219v1.452484h4.469261v-9.310537v-9.34814h-4.469261v9.34814
c0,1.439447-0.520927,2.70542-1.563789,3.798418c-1.042854,1.04286-2.309334,1.564291-3.79892,1.564291v4.469257
c1.117065,0,2.116806-0.18651,2.99823-0.559032C74.379509,24.814079,75.168167,24.341784,75.862572,23.771219z"/>
<path id="marcus-c" class="st1" d="M52.400223,12.15185c1.018291-1.04286,2.284264-1.564291,3.79842-1.564291
c0.720474,0,1.403347,0.130358,2.048618,0.391073c0.645771,0.260715,1.22887,0.651788,1.750298,1.173218
c1.042862,1.04286,1.564293,2.296298,1.564293,3.761316c0,1.489586-0.521431,2.75606-1.564293,3.79892
c-1.092495,1.04286-2.358467,1.564291-3.798916,1.564291c-1.489586,0-2.756062-0.521431-3.79842-1.564291l-3.165684,3.165684
c0.893452,0.893951,1.93631,1.594873,3.128082,2.104271c1.191769,0.508394,2.470776,0.763092,3.836021,0.763092
c1.365746,0,2.644249-0.254698,3.836021-0.763092c1.191769-0.509398,2.234627-1.21032,3.128578-2.104271
c0.893452-0.893953,1.595379-1.936813,2.104275-3.128582s0.763092-2.470778,0.763092-3.836021
c0-1.340677-0.254196-2.606649-0.763092-3.798418s-1.210823-2.23463-2.104275-3.128581
c-0.893951-0.893952-1.93681-1.595376-3.128578-2.104272c-1.191772-0.508394-2.470276-0.763594-3.836021-0.763594
c-1.365246,0-2.644253,0.2552-3.836021,0.763594c-1.191772,0.508896-2.234631,1.21032-3.128082,2.104272L52.400223,12.15185z"/>
<path id="marcus-u" class="st1" d="M31.581621,25.167549V14.814152c0-1.191769,0.422159-2.210062,1.265974-3.053876
c0.844315-0.844316,1.875141-1.265972,3.090977-1.265972c1.191769,0,2.21006,0.421657,3.053875,1.265972
c0.869385,0.868883,1.303577,1.886675,1.303577,3.053876v10.353397h4.469257V14.814152
c0-1.216838-0.192028-2.35897-0.577084-3.425897c-0.385056-1.067929-0.931053-1.998982-1.638996-2.793662
c-0.707439-0.79468-1.55777-1.421399-2.550995-1.880659c-0.992722-0.458758-2.097755-0.68889-3.31459-0.68889
c-1.042862,0-1.985947,0.180495-2.830265,0.539981c-0.843815,0.359486-1.601391,0.825264-2.27173,1.396831V6.546475h-4.469257
v18.621075H31.581621z"/>
<path id="marcus-s" class="st1" d="M15.995372,17.868029c0.359988,0.09877,0.701926,0.217094,1.02431,0.35397
c0.322886,0.135874,0.595633,0.309851,0.819246,0.521431c0.223112,0.210577,0.334919,0.465277,0.334919,0.763092
c0,0.545998-0.254198,0.943588-0.763094,1.191769c-0.508896,0.248182-1.024309,0.372522-1.545739,0.372522
c-0.670339,0-1.303576-0.148909-1.899209-0.446726c-0.596135-0.297815-1.142133-0.770111-1.638995-1.41538l-3.128079,3.12858
c0.446725,0.521431,0.993224,0.992723,1.638494,1.414881c0.571568,0.347452,1.297559,0.670839,2.178475,0.968657
c0.881919,0.297817,1.955363,0.446726,3.221836,0.446726c0.819248,0,1.613928-0.117823,2.383537-0.353971
c0.769611-0.236147,1.452484-0.602152,2.048119-1.098513c0.596134-0.496862,1.074448-1.123581,1.433933-1.880659
c0.359987-0.757578,0.53998-1.657545,0.53998-2.699903c0-1.018795-0.272747-1.887177-0.819246-2.607151
c-0.545998-0.720477-1.185251-1.316111-1.918261-1.787905c-0.732008-0.471794-1.452484-0.831781-2.159925-1.079962
c-0.707439-0.24818-1.21032-0.422158-1.508137-0.52143c-0.223612-0.074203-0.508895-0.155427-0.85685-0.241663
c-0.347453-0.087741-0.68889-0.205063-1.024309-0.353971c-0.334919-0.148909-0.626719-0.335421-0.8749-0.558533
c-0.24818-0.223613-0.372521-0.484328-0.372521-0.782145c0-0.42266,0.186009-0.782146,0.558532-1.079963
c0.372521-0.298318,0.944089-0.447227,1.713199-0.447227c0.496863,0,1.111549,0.111807,1.843557,0.33542
c0.732508,0.223112,1.4219,0.719474,2.067169,1.489586l3.090979-3.090978c-0.79418-0.795181-1.843557-1.465519-3.147133-2.011016
c-1.303576-0.545998-2.711939-0.819748-4.227094-0.819748c-0.992723,0-1.886173,0.148909-2.681355,0.447227
c-0.794178,0.297817-1.464517,0.719473-2.011016,1.265973C9.769796,7.837015,9.353655,8.470252,9.068373,9.190728
c-0.285282,0.719473-0.428676,1.514153-0.428676,2.383537c0,0.992723,0.27375,1.849072,0.819748,2.569548
c0.545998,0.719975,1.185753,1.322126,1.91776,1.806455c0.73251,0.483828,1.446467,0.862366,2.141374,1.135614
c0.695408,0.273251,1.191769,0.447227,1.489586,0.521431C15.306482,17.682018,15.635886,17.768755,15.995372,17.868029z"/>
</g>
</g>
<g id="wGroup">
<path id="wBbottom" class="st0" d="M127.092278,29.674309l-2.211258,7.623222l-2.396759-7.623222h-7.8573l6.451317,20.527237h7.792191
l5.99588-20.527237H127.092278z M153.523148,29.674309l-2.211258,7.623222l-2.396515-7.623222h-7.859741l6.453522,20.527237
h7.792175l5.982346-20.527237H153.523148z"/>
<path id="wTop" class="st1" d="M128.388641,25.20505l5.406891-18.640062h7.854919l5.859894,18.640062h-7.859818l-1.803314-5.736046
l-1.675476,5.736046H128.388641z M162.586182,25.20505l5.432404-18.640062h-7.792175l-5.406891,18.640062H162.586182z
M121.079094,25.20505l-5.860512-18.640062h-7.854416l5.858192,18.640062H121.079094z"/>
</g>
</svg>
***CSS***
.introShell{
display: grid;
height: 100vh;
background-color: hsl(var(--gray-200), 1);
}
.logoShell{
place-self: center;
display: grid;
place-items: center;
width: 100%;
}
.logo{
--baseSize-w: var(--loMed-1-4);
--baseSize-h: var(--small-1-3);
--edgeChase-w: var(--hiMed-1-1);
--chaseStop-w: var(--large-2-3);
}
#wielandGroup{
/* Added this outline just so I can see the
effects on the group */
outline: solid black 2px;
}
#wieland-i{
/* My attempt to scale an individual element */
transform: scale(1.2, 1.2);
}
#wielandGroupContainer{ clip-path: url('#wielandMask'); }
#marcusGroupContainer{ clip-path: url('#marcusMask'); }
I also tried adding the transform directly onto the element like this
<path id="wieland-i" class="st0" transform="scale(1.5, 1.5)" d="M167.61824,24.045807h4.469254v4.469761h-4.469254V24.045807z M167.61824,50.117817V31.49474h4.469254
v18.623077H167.61824z"/>
I ran into the same problem doing this way as well. Does anybody know what the problem is?
</details>
# 答案1
**得分**: 1
可以使用CSS来缩放单个元素。
```css
.svg2 path:last-child {
transform: scale(0.5);
transform-origin: center;
}
<!-- https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/transform -->
<svg class="svg1" viewBox="0 0 300 300" width="300" height="300" xmlns="http://www.w3.org/2000/svg" xmlns:bx="https://boxy-svg.com">
<path d="M 150 12.775 L 185.67 115.393 L 294.288 117.606 L 207.715 183.241 L 239.175 287.226 L 150 225.173 L 60.825 287.226 L 92.285 183.241 L 5.712 117.606 L 114.33 115.393 Z" style="stroke: rgb(0, 0, 0); fill: rgb(255, 242, 0);" bx:shape="star 150 164.488 151.713 151.713 0.4 5 1@762a0a51"/>
<path d="M 150 73.317 L 170.972 133.652 L 234.835 134.953 L 183.934 173.544 L 202.431 234.683 L 150 198.198 L 97.569 234.683 L 116.066 173.544 L 65.165 134.953 L 129.028 133.652 Z" style="stroke: rgb(0, 0, 0); fill: rgb(171, 0, 0);" bx:shape="star 150 162.518 89.201 89.201 0.4 5 1@d1d9bbe3"/>
</svg>
<svg class="svg2" viewBox="0 0 300 300" width="300" height="300" xmlns="http://www.w3.org/2000/svg" xmlns:bx="https://boxy-svg.com">
<path d="M 150 12.775 L 185.67 115.393 L 294.288 117.606 L 207.715 183.241 L 239.175 287.226 L 150 225.173 L 60.825 287.226 L 92.285 183.241 L 5.712 117.606 L 114.33 115.393 Z" style="stroke: rgb(0, 0, 0); fill: rgb(255, 242, 0);" bx:shape="star 150 164.488 151.713 151.713 0.4 5 1@762a0a51"/>
<path d="M 150 73.317 L 170.972 133.652 L 234.835 134.953 L 183.934 173.544 L 202.431 234.683 L 150 198.198 L 97.569 234.683 L 116.066 173.544 L 65.165 134.953 L 129.028 133.652 Z" style="stroke: rgb(0, 0, 0); fill: rgb(171, 0, 0);" bx:shape="star 150 162.518 89.201 89.201 0.4 5 1@d1d9bbe3"/>
</svg>
英文:
It certainly is possible to scale an individual element using CSS.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.svg2 path:last-child {
transform: scale(0.5);
transform-origin: center;
}
<!-- language: lang-html -->
<!-- https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/transform -->
<svg class="svg1" viewBox="0 0 300 300" width="300" height="300" xmlns="http://www.w3.org/2000/svg" xmlns:bx="https://boxy-svg.com">
<path d="M 150 12.775 L 185.67 115.393 L 294.288 117.606 L 207.715 183.241 L 239.175 287.226 L 150 225.173 L 60.825 287.226 L 92.285 183.241 L 5.712 117.606 L 114.33 115.393 Z" style="stroke: rgb(0, 0, 0); fill: rgb(255, 242, 0);" bx:shape="star 150 164.488 151.713 151.713 0.4 5 1@762a0a51"/>
<path d="M 150 73.317 L 170.972 133.652 L 234.835 134.953 L 183.934 173.544 L 202.431 234.683 L 150 198.198 L 97.569 234.683 L 116.066 173.544 L 65.165 134.953 L 129.028 133.652 Z" style="stroke: rgb(0, 0, 0); fill: rgb(171, 0, 0);" bx:shape="star 150 162.518 89.201 89.201 0.4 5 1@d1d9bbe3"/>
</svg>
<svg class="svg2" viewBox="0 0 300 300" width="300" height="300" xmlns="http://www.w3.org/2000/svg" xmlns:bx="https://boxy-svg.com">
<path d="M 150 12.775 L 185.67 115.393 L 294.288 117.606 L 207.715 183.241 L 239.175 287.226 L 150 225.173 L 60.825 287.226 L 92.285 183.241 L 5.712 117.606 L 114.33 115.393 Z" style="stroke: rgb(0, 0, 0); fill: rgb(255, 242, 0);" bx:shape="star 150 164.488 151.713 151.713 0.4 5 1@762a0a51"/>
<path d="M 150 73.317 L 170.972 133.652 L 234.835 134.953 L 183.934 173.544 L 202.431 234.683 L 150 198.198 L 97.569 234.683 L 116.066 173.544 L 65.165 134.953 L 129.028 133.652 Z" style="stroke: rgb(0, 0, 0); fill: rgb(171, 0, 0);" bx:shape="star 150 162.518 89.201 89.201 0.4 5 1@d1d9bbe3"/>
</svg>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论