Svg 路径宽度从 0 到 100% - CSS

Question

我有一个 SVG 电线。我想将电线宽度设置为从“0 到 100%”的动画，但它没有发生。如果它是 div，我可以很容易地做到这一点，但它是 SVG 图像。

这是我的代码：

svg path {
  animation: fadeRight 1s ease-in-out forwards;
}
@keyframes fadeRight {
  from {
    width: 0
  }
  to {
    width: 100%
  }
}

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1000 694.3" style="enable-background:new 0 0 1000 694.3;" xml:space="preserve"><g><g><g id="Layer_1_1_" class="st6"><g><path class="st5" d="M1273.1,68.1c-0.1-0.3-0.3-0.4-0.5-0.3c-20.7,6.9-78.4,22-149.1,29.4c-51.9,5.4-103.3,6.2-152.7,2.2C909,94.4,850.2,82,795.9,62.6c-0.1,0-0.1,0-0.2,0c-0.1,0-0.3,0-0.3,0.1c-32.4,38-68.9,67.5-108.4,87.4c-31.5,15.9-65.1,25.9-99.8,29.6c-47.2,5.1-87.1-3.1-101.6-8.1c0,0-0.1,0-0.1,0c0.1-0.2,0-0.4-0.2-0.5c-0.1-0.1-0.4,0-0.5,0.2c-23.4,43.8-50.1,78.2-79.6,102.1c-23.6,19.2-48.9,31.7-75.3,37.3c-43.3,9.3-75.4-3.6-77.9-4.6c0-0.1-0.1-0.1-0.2-0.2c-0.3-0.3-0.7-0.2-0.9,0.1c-39,54.5-83.7,99-133,132.3c-39.4,26.6-81.9,46.1-126.1,58c-75.4,20.2-130.5,11.1-131.1,11c-0.3-0.1-0.6,0.2-0.7,0.5c-0.1,0.3,0.2,0.6,0.5,0.7c0.3,0.1,13,2.2,34.4,2.2c23.6,0,57.6-2.5,97.2-13.1c44.4-11.9,86.9-31.5,126.4-58.1c49.5-33.4,94.4-78,133.4-132.6c2.7,1.1,20.6,7.9,46.7,7.9c9.5,0,20.1-0.9,31.5-3.4c26.5-5.6,51.9-18.2,75.6-37.4c29.5-23.9,56.1-58.1,79.5-101.8c0,0,0.1,0.1,0.1,0.1c0.4,0.1,28.9,9.8,71.8,9.8c9.4,0,19.6-0.5,30.1-1.5c34.7-3.7,68.4-13.7,100.1-29.7c39.6-19.9,76.1-49.3,108.6-87.5c54.2,19.4,113.1,31.7,174.8,36.7c20.8,1.7,42,2.5,63.4,2.5c29.5,0,59.4-1.6,89.4-4.6c70.9-7.4,128.6-22.5,149.3-29.4C1273.1,68.5,1273.2,68.3,1273.1,68.1z" style="
"></path></g></g></g></g></svg>

如果您想查看全线的实时网络，那么这是 url：http://green-light.infinitweb.co/

Note: I know path cannot have width attribute, I have tried a lot of things, but didn't find any solution. That's why i am putting question here. Suggest me any other animation or something i can animate it.

动画：我需要一个 0 到 100% 的动画，缩放和平移做不到，就像你看到加载进度条从 0 到 100% 平滑？就这样，不同的是这根线是弯的，loader是直的。请帮助我，我卡住了。

Answer 1

您可以像这样更改宽度：

path{stroke-width:15}

Answer 2

SVG 路径没有宽度属性，并且 style-able 不使用 CSS 宽度属性。而是使用 scale transform.

svg path {
  animation: fadeRight 1s ease-in-out forwards;
}
@keyframes fadeRight {
  from {
    transform: scaleX(0)
  }
  to {
    transform: scaleX(1)
  }
}

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1000 694.3" style="enable-background:new 0 0 1000 694.3;" xml:space="preserve"><g><g><g id="Layer_1_1_" class="st6"><g><path class="st5" d="M1273.1,68.1c-0.1-0.3-0.3-0.4-0.5-0.3c-20.7,6.9-78.4,22-149.1,29.4c-51.9,5.4-103.3,6.2-152.7,2.2C909,94.4,850.2,82,795.9,62.6c-0.1,0-0.1,0-0.2,0c-0.1,0-0.3,0-0.3,0.1c-32.4,38-68.9,67.5-108.4,87.4c-31.5,15.9-65.1,25.9-99.8,29.6c-47.2,5.1-87.1-3.1-101.6-8.1c0,0-0.1,0-0.1,0c0.1-0.2,0-0.4-0.2-0.5c-0.1-0.1-0.4,0-0.5,0.2c-23.4,43.8-50.1,78.2-79.6,102.1c-23.6,19.2-48.9,31.7-75.3,37.3c-43.3,9.3-75.4-3.6-77.9-4.6c0-0.1-0.1-0.1-0.2-0.2c-0.3-0.3-0.7-0.2-0.9,0.1c-39,54.5-83.7,99-133,132.3c-39.4,26.6-81.9,46.1-126.1,58c-75.4,20.2-130.5,11.1-131.1,11c-0.3-0.1-0.6,0.2-0.7,0.5c-0.1,0.3,0.2,0.6,0.5,0.7c0.3,0.1,13,2.2,34.4,2.2c23.6,0,57.6-2.5,97.2-13.1c44.4-11.9,86.9-31.5,126.4-58.1c49.5-33.4,94.4-78,133.4-132.6c2.7,1.1,20.6,7.9,46.7,7.9c9.5,0,20.1-0.9,31.5-3.4c26.5-5.6,51.9-18.2,75.6-37.4c29.5-23.9,56.1-58.1,79.5-101.8c0,0,0.1,0.1,0.1,0.1c0.4,0.1,28.9,9.8,71.8,9.8c9.4,0,19.6-0.5,30.1-1.5c34.7-3.7,68.4-13.7,100.1-29.7c39.6-19.9,76.1-49.3,108.6-87.5c54.2,19.4,113.1,31.7,174.8,36.7c20.8,1.7,42,2.5,63.4,2.5c29.5,0,59.4-1.6,89.4-4.6c70.9-7.4,128.6-22.5,149.3-29.4C1273.1,68.5,1273.2,68.3,1273.1,68.1z" style="
"></path></g></g></g></g></svg>

Answer 3

您可以剪辑它并更改剪辑。我在下面展示了这个。
或者您可以使用 stroke-dasharray 使线条看起来像是在绘制。已经有很多这样的例子，例如

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 1000 694.3" xml:space="preserve">
  <g id="Layer_1_1_" class="st6">
    <g>
      <path class="st5" d="M1273.1,68.1c-0.1-0.3-0.3-0.4-0.5-0.3c-20.7,6.9-78.4,22-149.1,29.4c-51.9,5.4-103.3,6.2-152.7,2.2C909,94.4,850.2,82,795.9,62.6c-0.1,0-0.1,0-0.2,0c-0.1,0-0.3,0-0.3,0.1c-32.4,38-68.9,67.5-108.4,87.4c-31.5,15.9-65.1,25.9-99.8,29.6c-47.2,5.1-87.1-3.1-101.6-8.1c0,0-0.1,0-0.1,0c0.1-0.2,0-0.4-0.2-0.5c-0.1-0.1-0.4,0-0.5,0.2c-23.4,43.8-50.1,78.2-79.6,102.1c-23.6,19.2-48.9,31.7-75.3,37.3c-43.3,9.3-75.4-3.6-77.9-4.6c0-0.1-0.1-0.1-0.2-0.2c-0.3-0.3-0.7-0.2-0.9,0.1c-39,54.5-83.7,99-133,132.3c-39.4,26.6-81.9,46.1-126.1,58c-75.4,20.2-130.5,11.1-131.1,11c-0.3-0.1-0.6,0.2-0.7,0.5c-0.1,0.3,0.2,0.6,0.5,0.7c0.3,0.1,13,2.2,34.4,2.2c23.6,0,57.6-2.5,97.2-13.1c44.4-11.9,86.9-31.5,126.4-58.1c49.5-33.4,94.4-78,133.4-132.6c2.7,1.1,20.6,7.9,46.7,7.9c9.5,0,20.1-0.9,31.5-3.4c26.5-5.6,51.9-18.2,75.6-37.4c29.5-23.9,56.1-58.1,79.5-101.8c0,0,0.1,0.1,0.1,0.1c0.4,0.1,28.9,9.8,71.8,9.8c9.4,0,19.6-0.5,30.1-1.5c34.7-3.7,68.4-13.7,100.1-29.7c39.6-19.9,76.1-49.3,108.6-87.5c54.2,19.4,113.1,31.7,174.8,36.7c20.8,1.7,42,2.5,63.4,2.5c29.5,0,59.4-1.6,89.4-4.6c70.9-7.4,128.6-22.5,149.3-29.4C1273.1,68.5,1273.2,68.3,1273.1,68.1z" clip-path="url(#c)" />
      <clipPath id="c">
        <rect height="100%" width="0%" fill="black">
          <animate attributeName="width" dur="1s" from="0" to="100%" fill="freeze" />
        </rect>
      </clipPath>
    </g>
  </g>
</svg>

Svg 路径宽度从 0 到 100% - CSS

Svg path width from 0 to 100% - CSS

html

css

animation

svg

css-animations