Svg路径宽度从0到100% - CSS
Svg路径宽度从0到100% - CSS
提问于 2022-01-31 12:04:58
我有一堆电线。我想动画的电线宽度从"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>
如果你想看全线直播的网络，那么这就是网址：http://green-light.infinitweb.co/
注意:我知道路径不能有宽度属性，我尝试了很多事情，但是没有找到任何解决方案。这就是为什么我在这里提出问题。建议我任何其他动画或其他东西，我可以动画它。
动画：我需要一个0%到100%的动画，缩放和翻译不能做到这一点，就像你看到一个加载进度条从0到100%顺利地运行吗？就像这样，区别是这条线是弯曲的，而装载机是直的。请帮帮我，我被困住了。
回答 3
Stack Overflow用户
回答已采纳
发布于 2022-01-31 14:05:48
- 您可以将其剪辑并更改剪辑。我在下面展示了这个。
- 或者，您可以使用笔画-达沙雷，使它看起来像是在画线。已经有很多这样的例子，例如这一个
<?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>
Stack Overflow用户
发布于 2022-01-31 12:20:47
SVG路径没有宽度属性，使用CSS宽度属性也不能使用样式。相反，请使用尺度变换。
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>
Stack Overflow用户
发布于 2022-01-31 12:19:45
您可以这样更改宽度：
path{stroke-width:15}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/70925681
复制相关文章
相似问题
腾讯云开发者
