是否可以使用css变换更改svg路径高度？ （不是比例，不是整个 svg，只有一条路径）

问题描述 投票：0回答：5

我正在尝试增加 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>

css animation svg transform scale
5个回答
1
投票

按照 @n-- 的建议，您需要在悬停时单独缩放元素：

  • 矩形背景
  • 图标

为了避免 扭曲，您可以使用带有 

<rect>
rx
属性（用于圆形边框）的 
ry
元素，并在悬停时更改 
height
和 
y
值。

我们可以通过对 svgs 应用 overflow:visible 属性来避免 

clipping
。

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
只需更改 
M
y 值即可创建 
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");
}
1
投票

如果我理解所需的结果，那么可以通过对某些路径使用 grouping element 来完成此操作，然后应用带有 center 原点的 

transform-origin
来完成：

#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>

0
投票

这是最终结果。再次感谢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>

-1
投票

SVG 模式（和过滤器）不像 CSS 的背景重复那样工作，因此使用 SVG 无法实现您想要做的事情。您不能拥有隐式大小的 viewBox 和 SVG 元素，并且拥有固定大小的图案元素：默认情况下，图案元素将以 viewBox 单位调整大小。

也就是说，如果您不做复杂的事情，可以通过一些巧妙的方法来获得您想做的事情。例如，您可以在整个 SVG 元素上设置背景重复：重复，然后使用过滤器在形状外部的区域上进行绘制，使其看起来像是被填充的。但是是的...

-2
投票

aight，对于 SVG 边框问题，它只向下生长而不向上生长，而且圆角变得很奇怪，你必须尝试另一种方法。您可以在悬停时调整矩形元素的“y”属性n“高度”，以使其从上到下更高，而不是缩放。像这样：

#pants-border:hover {
    y: calc(originalY - growAmount);
    height: calc(originalHeight + (2 * growAmount));
}

用你的矩形的初始y值替换originalY，用它的初始高度替换originalHeight，用你想要增加多少高度来替换growAmount。

对于里面的图标，如果你想保持它统一，你可能想将它包装在一个标签中，然后对其应用转换，而不是整个 SVG。这样你就可以控制图标与边框分开的缩放。

顺便说一句，如果你想让东西保持响应，请考虑使用 viewBox 以及宽度和高度的百分比。另外，使用 CSS 来变换动画，而不仅仅是缩放路径。当您想要非均匀变换时，缩放可能会弄乱事情。

希望这有帮助，兄弟。 👍

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.