我正在嘗試增加 SVG 路徑（邊框）的高度，但我遇到的問題是邊框被隱藏，只會向下（而不是向上）增長，并且圓角會被拉伸。如果我對整個 SVG 進行縮放，那么里面的圖示也會被拉伸，我希望該圖示均勻增長。我認為為該框使用 div 也不是解決方案，因為我希望調整整個構圖的大小以回應地填充空間。
有什么解決辦法嗎？
#box{
position:absolute;
left: 80px;
}
#t-shirt{
position: absolute;
left:0;
top: 25%;
}
#t-shirt:hover {
transform: scale(1,1.2);
}
#pants{
position: absolute;
left: 160px;
top: 25%;
}
#pants:hover #pants-border{
transform: scale(1,1.2);
}<svg id="box" width="315" height="341" viewBox="0 0 315 341" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="10.5" y="9.5" width="304" height="331" rx="19.5" fill="#242420" stroke="#242420"/>
<rect x="0.5" y="0.5" width="304" height="331" rx="19.5" fill="#D9D9D9" stroke="#242420"/>
<circle cx="23" cy="20" r="6.5" fill="#C9C9C9" stroke="#242420"/>
<circle cx="47" cy="20" r="6.5" fill="#C9C9C9" stroke="#242420"/>
<circle cx="71" cy="20" r="6.5" fill="#C9C9C9" stroke="#242420"/>
</svg>
<svg id="t-shirt" width="147" height="147" viewBox="0 0 147 147" fill="none" xmlns="http://www.w3.org/2000/svg">
<path height="200" d="M19.3522 0.706462H126.757C137.178 0.706462 145.626 9.15414 145.626 19.5749V126.98C145.626 137.4 137.178 145.848 126.757 145.848H19.3522C8.93148 145.848 0.483806 137.4 0.483806 126.98V19.5749C0.483806 9.15414 8.93149 0.706462 19.3522 0.706462Z" fill="#EBEBEB" stroke="#242420" stroke-width="0.967611"/>
<path d="M112.243 116.336H34.834L35.0547 113.12L35.2341 110.749L35.441 107.977L35.6066 105.579L35.8135 102.806L35.9928 100.408L36.1998 97.6353L36.3653 95.2648L41.1525 29.251H53.8172C53.9529 34.4014 56.0844 39.295 59.7577 42.8896C63.431 46.4841 68.3559 48.4956 73.4833 48.4956C78.6106 48.4956 83.5354 46.4841 87.2087 42.8896C90.882 39.295 93.0136 34.4014 93.1493 29.251H105.869L110.643 95.2648L110.822 97.6353L111.029 100.408L111.194 102.806L111.401 105.579L111.581 107.977L111.788 110.749L111.953 113.12L112.243 116.336Z" fill="#D9D9D9"/>
<path d="M37.7369 29.251L13.5466 58.7078L34.2872 75.6963L37.7369 29.251Z" fill="#d9d9d9"/>
<path d="M109.34 29.251L133.53 58.7078L112.776 75.6963L109.34 29.251Z" fill="#D9D9D9"/>
</svg>
<svg id="pants" width="148" height="147" viewBox="0 0 148 147" fill="none" xmlns="http://www.w3.org/2000/svg">
<path id="pants-border" d="M19.8137 0.706462H128.186C138.607 0.706462 147.055 9.15414 147.055 19.5749V126.98C147.055 137.4 138.607 145.848 128.186 145.848H19.8136C9.39288 145.848 0.945231 137.4 0.945231 126.98V19.5749C0.945231 9.15414 9.39291 0.706462 19.8137 0.706462Z" fill="#EBEBEB" stroke="#242420" stroke-width="0.967611"/>
<path d="M103.028 12.8018V19.575L74 19.5611V19.575H44.9717V12.8018H103.028Z" fill="#DADADA"/>
<path d="M94.3198 24.4131H103.028V33.1216C94.465 32.713 94.3198 24.4131 94.3198 24.4131Z" fill="#DADADA"/>
<path d="M103.028 38.4122V132.786H80.6181L74.021 45.4874L67.382 132.786H44.9717V38.4122C48.7254 37.779 57.6755 35.1361 57.6755 24.4131H71.5839C71.5839 31.7636 71.3738 38.1781 73.993 38.2607C76.6262 38.2607 76.4161 31.7636 76.4161 24.4131H90.3385C90.3245 35.1361 99.2746 37.779 103.028 38.4122Z" fill="#DADADA"/>
<path d="M44.9717 33.1216V24.4131H53.6802C53.6802 24.4131 53.5205 32.713 44.9717 33.1216Z" fill="#DADADA"/>
</svg>uj5u.com熱心網友回復：
正如@n所建議的那樣，您需要在懸停時單獨縮放元素：
- 矩形背景
- 圖示
為避免失真，您可以使用<rect>具有屬性的元素rx ry（用于圓形邊框）并在懸停時更改height和y值。
我們可以通過對 svg 應用屬性來避免裁剪。overflow:visible
顯示代碼片段
svg {
overflow: visible;
}
svg * {
transform-origin: center;
transition: 0.3s;
}
#box {
position: absolute;
left: 80px;
}
#t-shirt {
position: absolute;
left: 0;
top: 25%;
}
#pants {
position: absolute;
left: 160px;
top: 25%;
}
/* scale rect by changing height */
#t-shirt:hover .rect-shirt {
height: 180px;
y: -14px;
}
/* scale icons */
svg:hover .g-icon {
transform: scale(1.2);
}
/* scale rect by changing d */
#pants:hover .rect-pants {
d: path("M0 4.8 a 19.5 19.5 0 0 1 19.5-19.5 h 107 a 19.5 19.5 0 0 1 19.5 19.5 v 140 a19.5 19.5 0 0 1-19.5 19.5 h -107 a19.5 19.5 0 0 1-19.5-19.5 z");
}<svg id="box" width="315" height="341" viewBox="0 0 315 341" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="10.5" y="9.5" width="304" height="331" rx="19.5" fill="#242420" stroke="#242420" />
<rect x="0.5" y="0.5" width="304" height="331" rx="19.5" fill="#D9D9D9" stroke="#242420" />
<circle cx="23" cy="20" r="6.5" fill="#C9C9C9" stroke="#242420" />
<circle cx="47" cy="20" r="6.5" fill="#C9C9C9" stroke="#242420" />
<circle cx="71" cy="20" r="6.5" fill="#C9C9C9" stroke="#242420" />
</svg>
<svg id="t-shirt" width="147" height="147" viewBox="0 0 147 147" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect class="rect-shirt transition" x="0.5" y="0.5" width="146" height="146" rx="19.5" fill="#EBEBEB" stroke="#242420" stroke-width="1" ></rect>
<g class="g-icon g-shirt">
<path d="M112.243 116.336H34.834L35.0547 113.12L35.2341 110.749L35.441 107.977L35.6066 105.579L35.8135 102.806L35.9928 100.408L36.1998 97.6353L36.3653 95.2648L41.1525 29.251H53.8172C53.9529 34.4014 56.0844 39.295 59.7577 42.8896C63.431 46.4841 68.3559 48.4956 73.4833 48.4956C78.6106 48.4956 83.5354 46.4841 87.2087 42.8896C90.882 39.295 93.0136 34.4014 93.1493 29.251H105.869L110.643 95.2648L110.822 97.6353L111.029 100.408L111.194 102.806L111.401 105.579L111.581 107.977L111.788 110.749L111.953 113.12L112.243 116.336Z" fill="#D9D9D9" />
<path d="M37.7369 29.251L13.5466 58.7078L34.2872 75.6963L37.7369 29.251Z" fill="#d9d9d9" />
<path d="M109.34 29.251L133.53 58.7078L112.776 75.6963L109.34 29.251Z" fill="#D9D9D9" />
</g>
</svg>
<svg id="pants" width="148" height="147" viewBox="0 0 148 147" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="rect-pants transition" fill="#EBEBEB" stroke="#242420" stroke-width="1" d="
M0 19.5
a19.5 19.5 0 0 1 19.5-19.5
h107
a19.5 19.5 0 0 1 19.5 19.5
v107a19.5 19.5 0 0 1-19.5 19.5
h-107
a19.5 19.5 0 0 1-19.5-19.5
z"/>
<g class="g-icon g-pants">
<path d="M103.028 12.8018V19.575L74 19.5611V19.575H44.9717V12.8018H103.028Z" fill="#DADADA" />
<path d="M94.3198 24.4131H103.028V33.1216C94.465 32.713 94.3198 24.4131 94.3198 24.4131Z" fill="#DADADA" />
<path d="M103.028 38.4122V132.786H80.6181L74.021 45.4874L67.382 132.786H44.9717V38.4122C48.7254 37.779 57.6755 35.1361 57.6755 24.4131H71.5839C71.5839 31.7636 71.3738 38.1781 73.993 38.2607C76.6262 38.2607 76.4161 31.7636 76.4161 24.4131H90.3385C90.3245 35.1361 99.2746 37.779 103.028 38.4122Z" fill="#DADADA" />
<path d="M44.9717 33.1216V24.4131H53.6802C53.6802 24.4131 53.5205 32.713 44.9717 33.1216Z" fill="#DADADA" />
</g>
</svg>替代方案：轉換d（路徑資料）屬性
使用相對命令將褲子矩形繪制為路徑
M 0 19.5
a 19.5 19.5 0 0 1 19.5-19.5
h 107
a 19.5 19.5 0 0 1 19.5 19.5
v 107
a 19.5 19.5 0 0 1-19.5 19.5
h -107
a 19.5 19.5 0 0 1-19.5-19.5
z
d可以通過像這樣更改My 值和v（垂直線）來創建懸停
M 0 4.8 // rectangle's x/y position
a 19.5 19.5 0 0 1 19.5-19.5
h 107
a 19.5 19.5 0 0 1 19.5 19.5
v 140 // rectangle's height
a 19.5 19.5 0 0 1-19.5 19.5
h -107
a 19.5 19.5 0 0 1-19.5-19.5
z
我們可以使用 css 方法更改路徑幾何path()：
/* scale rect by changing d */
#pants:hover .rect-pants{
d:path("M0 4.8 a 19.5 19.5 0 0 1 19.5-19.5 h 107 a 19.5 19.5 0 0 1 19.5 19.5 v 140 a19.5 19.5 0 0 1-19.5 19.5 h -107 a19.5 19.5 0 0 1-19.5-19.5 z");
}
uj5u.com熱心網友回復：
如果我理解所需的結果，那么可以通過對某些路徑使用分組元素來完成，然后對其應用帶有原點的變換原點center：
#box {
position:absolute;
left: 80px;
}
#t-shirt, #pants {
position: absolute;
left:0;
top: 25%;
}
#pants{
left: 160px;
}
#t-shirt:hover,
#pants:hover {
transform: scale(1,1.2);
}
#t-shirt:hover g,
#pants:hover g {
transform: scale(1.2,1.2);
transform-origin: center;
}<svg id="box" width="315" height="341" viewBox="0 0 315 341" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="10.5" y="9.5" width="304" height="331" rx="19.5" fill="#242420" stroke="#242420"/>
<rect x="0.5" y="0.5" width="304" height="331" rx="19.5" fill="#D9D9D9" stroke="#242420"/>
<circle cx="23" cy="20" r="6.5" fill="#C9C9C9" stroke="#242420"/>
<circle cx="47" cy="20" r="6.5" fill="#C9C9C9" stroke="#242420"/>
<circle cx="71" cy="20" r="6.5" fill="#C9C9C9" stroke="#242420"/>
</svg>
<svg id="t-shirt" width="147" height="147" viewBox="0 0 147 147" fill="none" xmlns="http://www.w3.org/2000/svg">
<path height="200" d="M19.3522 0.706462H126.757C137.178 0.706462 145.626 9.15414 145.626 19.5749V126.98C145.626 137.4 137.178 145.848 126.757 145.848H19.3522C8.93148 145.848 0.483806 137.4 0.483806 126.98V19.5749C0.483806 9.15414 8.93149 0.706462 19.3522 0.706462Z" fill="#EBEBEB" stroke="#242420" stroke-width="0.967611"/>
<g>
<path d="M112.243 116.336H34.834L35.0547 113.12L35.2341 110.749L35.441 107.977L35.6066 105.579L35.8135 102.806L35.9928 100.408L36.1998 97.6353L36.3653 95.2648L41.1525 29.251H53.8172C53.9529 34.4014 56.0844 39.295 59.7577 42.8896C63.431 46.4841 68.3559 48.4956 73.4833 48.4956C78.6106 48.4956 83.5354 46.4841 87.2087 42.8896C90.882 39.295 93.0136 34.4014 93.1493 29.251H105.869L110.643 95.2648L110.822 97.6353L111.029 100.408L111.194 102.806L111.401 105.579L111.581 107.977L111.788 110.749L111.953 113.12L112.243 116.336Z" fill="#D9D9D9"/>
<path d="M37.7369 29.251L13.5466 58.7078L34.2872 75.6963L37.7369 29.251Z" fill="#d9d9d9"/>
<path d="M109.34 29.251L133.53 58.7078L112.776 75.6963L109.34 29.251Z" fill="#D9D9D9"/>
</g>
</svg>
<svg id="pants" width="148" height="147" viewBox="0 0 148 147" fill="none" xmlns="http://www.w3.org/2000/svg">
<path id="pants-border" d="M19.8137 0.706462H128.186C138.607 0.706462 147.055 9.15414 147.055 19.5749V126.98C147.055 137.4 138.607 145.848 128.186 145.848H19.8136C9.39288 145.848 0.945231 137.4 0.945231 126.98V19.5749C0.945231 9.15414 9.39291 0.706462 19.8137 0.706462Z" fill="#EBEBEB" stroke="#242420" stroke-width="0.967611"/>
<g>
<path d="M103.028 12.8018V19.575L74 19.5611V19.575H44.9717V12.8018H103.028Z" fill="#DADADA"/>
<path d="M94.3198 24.4131H103.028V33.1216C94.465 32.713 94.3198 24.4131 94.3198 24.4131Z" fill="#DADADA"/>
<path d="M103.028 38.4122V132.786H80.6181L74.021 45.4874L67.382 132.786H44.9717V38.4122C48.7254 37.779 57.6755 35.1361 57.6755 24.4131H71.5839C71.5839 31.7636 71.3738 38.1781 73.993 38.2607C76.6262 38.2607 76.4161 31.7636 76.4161 24.4131H90.3385C90.3245 35.1361 99.2746 37.779 103.028 38.4122Z" fill="#DADADA"/>
<path d="M44.9717 33.1216V24.4131H53.6802C53.6802 24.4131 53.5205 32.713 44.9717 33.1216Z" fill="#DADADA"/>
</g>
</svg>uj5u.com熱心網友回復：
這是最終結果。再次感謝 herrstrietzel！
svg {
overflow: visible;
}
svg * {
transform-origin: center;
transition: 0.3s;
}
#box {
position: absolute;
left: 80px;
}
#boots{
position: absolute;
left: 320px;
top: 110px;
}
#t-shirt {
position: absolute;
left: 0;
top: 110px;
}
#t-shirt .rect-shirt{
animation: t-shirt-animation 5s infinite;
}
@keyframes t-shirt-animation {
0%,20%{height: 147px; y: 0px;}
25%,45%{height: 180px; y: -14px;}
50%,100%{height: 147px; y: 0px;}
}
#t-shirt .g-icon{
animation: t-shirt-icon-animation 5s infinite;
}
@keyframes t-shirt-icon-animation {
0%,20%{transform: scale(1)}
25%,45%{transform: scale(1.2)}
50%,100%{transform: scale(1)}
}
#pants {
position: absolute;
left: 160px;
top: 110px;
}
#pants .rect-pants{
animation: pants-animation 5s infinite;
}
@keyframes pants-animation {
0%,50%{height: 147px; y: 0px;}
55%,75%{height: 180px; y: -14px;}
80%,100%{height: 147px; y: 0px;}
}
#pants .g-icon{
animation: pants-icon-animation 5s infinite;
}
@keyframes pants-icon-animation {
0%,50%{transform: scale(1)}
55%,75%{transform: scale(1.2)}
80%,100%{transform: scale(1)}
}
#pants path{
animation: pants-icon-fill 5s infinite;
}
@keyframes pants-icon-fill {
0%,50%{fill: #DADADA;}
55%,75%{fill: #8e8d8b;}
80%,100%{fill: #DADADA;}
}
#mouse {
position: absolute;
left: 160px;
top: 280px;
animation: mouse-animation 5s infinite;
}
@keyframes mouse-animation {
0%,27%{tranform:translate(0px);}
28%,38%{transform:translate(-80px,-70px);}
58%,68%{transform:translate(90px,-70px);}
69%,100%{tranform:translate(0px);}
}<svg id="box" width="315" height="341" viewBox="0 0 315 341" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="10.5" y="9.5" width="304" height="331" rx="19.5" fill="#242420" stroke="#242420" />
<rect x="0.5" y="0.5" width="304" height="331" rx="19.5" fill="#D9D9D9" stroke="#242420" />
<circle cx="23" cy="20" r="6.5" fill="#C9C9C9" stroke="#242420" />
<circle cx="47" cy="20" r="6.5" fill="#C9C9C9" stroke="#242420" />
<circle cx="71" cy="20" r="6.5" fill="#C9C9C9" stroke="#242420" />
</svg>
<svg id="t-shirt" width="147" height="147" viewBox="0 0 147 147" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect class="rect-shirt transition" x="0.5" y="0.5" width="146" height="146" rx="19.5" fill="#EBEBEB" stroke="#242420" stroke-width="1" ></rect>
<g class="g-icon g-shirt">
<path d="M112.243 116.336H34.834L35.0547 113.12L35.2341 110.749L35.441 107.977L35.6066 105.579L35.8135 102.806L35.9928 100.408L36.1998 97.6353L36.3653 95.2648L41.1525 29.251H53.8172C53.9529 34.4014 56.0844 39.295 59.7577 42.8896C63.431 46.4841 68.3559 48.4956 73.4833 48.4956C78.6106 48.4956 83.5354 46.4841 87.2087 42.8896C90.882 39.295 93.0136 34.4014 93.1493 29.251H105.869L110.643 95.2648L110.822 97.6353L111.029 100.408L111.194 102.806L111.401 105.579L111.581 107.977L111.788 110.749L111.953 113.12L112.243 116.336Z" fill="#D9D9D9" />
<path d="M37.7369 29.251L13.5466 58.7078L34.2872 75.6963L37.7369 29.251Z" fill="#d9d9d9" />
<path d="M109.34 29.251L133.53 58.7078L112.776 75.6963L109.34 29.251Z" fill="#D9D9D9" />
</g>
</svg>
<svg id="pants" width="148" height="147" viewBox="0 0 148 147" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect class="rect-pants transition" x="0.5" y="0.5" width="146" height="146" rx="19.5" fill="#EBEBEB" stroke="#242420" stroke-width="1" ></rect>
<g class="g-icon g-pants">
<path d="M103.028 12.8018V19.575L74 19.5611V19.575H44.9717V12.8018H103.028Z" fill="#DADADA" />
<path d="M94.3198 24.4131H103.028V33.1216C94.465 32.713 94.3198 24.4131 94.3198 24.4131Z" fill="#DADADA" />
<path d="M103.028 38.4122V132.786H80.6181L74.021 45.4874L67.382 132.786H44.9717V38.4122C48.7254 37.779 57.6755 35.1361 57.6755 24.4131H71.5839C71.5839 31.7636 71.3738 38.1781 73.993 38.2607C76.6262 38.2607 76.4161 31.7636 76.4161 24.4131H90.3385C90.3245 35.1361 99.2746 37.779 103.028 38.4122Z" fill="#DADADA" />
<path d="M44.9717 33.1216V24.4131H53.6802C53.6802 24.4131 53.5205 32.713 44.9717 33.1216Z" fill="#DADADA" />
</g>
</svg>
<svg id="boots" width="147" height="147" viewBox="0 0 147 147" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M20.2429 0.706462H127.648C138.069 0.706462 146.516 9.15414 146.516 19.5749V126.98C146.516 137.4 138.069 145.848 127.648 145.848H20.2429C9.82217 145.848 1.37449 137.4 1.37449 126.98V19.5749C1.37449 9.15414 9.82217 0.706462 20.2429 0.706462Z" fill="#EBEBEB" stroke="#242420" stroke-width="0.967611"/>
<path d="M81.7866 41.8469C83.3104 44.2355 85.109 46.4659 87.1513 48.4994L85.747 40.902C86.6215 40.8016 87.5093 40.8922 88.3388 41.1665C89.1683 41.4408 89.9161 41.8911 90.5218 42.481C90.5218 42.481 89.6651 48.0076 91.9262 50.0395C99.4396 56.8474 117.416 66.4897 120.224 66.9944C133.453 69.4406 133.453 70.5537 133.453 70.5537C133.453 70.5537 127.527 80.7137 108.399 82.2668C108.399 82.2668 96.4061 77.465 89.7916 77.465C83.177 77.465 84.9324 89.2429 84.9324 89.2429H77.0118C77.0118 89.2429 69.9899 80.7137 69.0771 72.1715C68.1643 63.6293 70.0601 58.0381 65.7206 47.3863C65.7206 47.3863 70.8466 44.2412 75.2563 41.9504C79.666 39.6595 81.7866 41.8469 81.7866 41.8469Z" fill="#D9D9D9"/>
<path d="M56.8907 56.0847C56.2885 60.2771 56.8907 61.2445 56.8907 61.2445L60.3913 51.0151C60.3913 51.0151 64.074 54.0337 62.9678 57.2715C62.9678 57.2715 59.2011 62.2765 59.6632 65.1402C61.1895 74.7247 69.171 92.3585 71.0613 94.3192C79.981 103.594 79.2529 104.471 79.2529 104.471C79.2529 104.471 67.9107 109.257 51.6957 99.879C51.6957 99.879 45.2965 89.4045 40.0455 85.6894C34.7945 81.9743 28.4933 92.3585 28.4933 92.3585L22.1781 87.9597C22.1781 87.9597 22.1781 77.2659 27.023 69.9905C31.868 62.7151 36.3768 57.5424 39.8915 46.668H43.3081C43.3081 46.668 40.8856 50.2411 48.195 53.8143C50.8819 55.14 53.8483 55.9145 56.8907 56.0847Z" fill="#D9D9D9"/>
</svg>
<svg id="mouse" width="19" height="30" viewBox="0 0 19 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1.88755 25.3335L6.68873 21.6107L9.67757 28.8303L9.86274 29.2776L10.3099 29.0921L13.5109 27.7647L13.9575 27.5795L13.7726 27.1328L10.8009 19.9528L16.9545 19.0353L17.8981 18.8946L17.227 18.2165L1.93497 2.76514L1.10729 1.92885V3.10547V24.9512V25.9385L1.88755 25.3335Z" fill="#263238" stroke="#D9D9D9" stroke-width="0.967611"/>
</svg>uj5u.com熱心網友回復：
SVG 模式（和過濾器）不像 CSS 的 background-repeat 那樣作業，所以使用 SVG 無法實作您想要做的事情。你不能有一個隱式大小的 viewBox 和 SVG 元素并且有固定大小的模式元素：默認情況下，模式元素的大小將以 viewBox 為單位。
也就是說，如果你不做復雜的事情，有一些hacky方法可以得到你想做的事情。例如，您可以在整個 SVG 元素上設定 background-repeat:repeat，然后使用過濾器在形狀之外的區域上進行繪制，使其看起來像是填充的。但是耶...
uj5u.com熱心網友回復：
相比之下，SVG 影像可以以任何像素大小繪制，因此它們不需要明確定義的高度或寬度。而且它們并不總是具有明確定義的縱橫比。如果您希望 SVG 縮放以適合您給它的尺寸，您將需要明確提供此資訊（以及更多資訊）。
如果不這樣做，SVG 將根本無法擴展。以下示例使用行內 SVG，調整元素的尺寸（虛線），而不改變繪制圖形的大小
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/521022.html
標籤：css动画svg转换规模
上一篇：如何以互動方式更改影片引數