使用 css 更改 svg 路径

【问题标题】：Changing svg path by using css使用 css 更改 svg 路径
【发布时间】：2021-10-08 07:18:09
【问题描述】：

如何通过使用 css（如果需要，还可以使用 javascript）更改带有动画的 svg 路径？我尝试使用过渡和@keyframes，但它们不起作用。有哪些方法可以做到这一点？

        svg {
            overflow: initial;
            width:500px;
            height: 500px;
        }

        path {
            transition: d 0.5s;
        }

        .pa {
            
            stroke-width: 1;
            stroke:black;
            fill:transparent;
            
        }

        .a:hover .pa {
            d: path("M0 100 L240 100");
        }

    <div class="a">
        <svg width="500" height="500">
            <path class="pa"  d="M0 100 L50 100 A 40 40 0, 0 1, 190 100 L 240 100"></path>
        </svg>
    </div>

【问题讨论】：

标签： css svg path

【解决方案1】：

d属性指定的点数与css中的点数不匹配。

检查以下示例。

svg {
  overflow: initial;
}
path {
  transition: d 0.5s;
}

.pa {

  stroke-width: 1;
  stroke:black;
  fill:transparent;

}
.a:hover .pa {
  d: path("M11 208H159.846C159.846 208 155.923 208 299.886 208C433.996 208 449.343 208 449.343 208H577");
}

<div class="a">
  
  <svg width="592" height="231" viewBox="0 0 592 231" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="pa" d="M11 208H159.846C159.846 208 155.923 71 299.886 71C433.996 71 449.343 208 449.343 208H577" stroke="black" stroke-width="2"/>
</svg>
  
</div>

我使用 Figma 制作了如下的 svg。首先创建了这个形状。

然后向下拖动中心点，使直线如下。因此，两种形状的点数将相同。

【讨论】：