需要填充Svg动画的曲线

Question

我在svg中有一条曲线，需要在悬停时沿着它的路径填充曲线，任何人都可以帮忙吗？ 填充动画应该是另一种颜色或可以是相同的。 我尝试使用animate标签，但它没有效果，并且像任何东西一样填充。 我的SVG路径如下。 这是我的Svg代码，需要将此路径填充为dashoffset。

 <svg width="210mm" height="45mm" viewBox="0 0 744.09449 159.44881"> <path style="opacity:1;fill:#ded9d5;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0;stroke-linecap:round;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-opacity:1" d="m 18.929688,529.44141 c 1.140051,2.17164 1.739409,4.60197 1.74414,7.07226 -0.0033,2.41521 -0.575072,4.79339 -1.666016,6.92969 l 36.876954,0 c 17.101683,0 11.124297,14.78094 13.525192,34.92207 7.304679,27.32129 35.935342,38.13518 62.612922,41.73111 -1.5457,-2.42739 -4.33484,-7.94712 -4.33733,-10.8524 0.005,-3.11453 0.90166,-5.74434 2.66254,-8.27277 -23.30774,-1.1068 -29.8766,-7.34118 -39.33413,-22.29658 -4.829034,-11.35821 5.68082,-49.23338 -28.703413,-49.23338 z" transform="translate(0.5714286,1.42857)" id="path4471" /> </svg> 

Answer 1

您的SVG修补程序代码超出了用户viewport ，因此您无法看到曲线。
我使用-svg-editor Peter Collingridge稍微优化了你的SVG代码

 <svg id="svg1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="420" height="180" viewBox="-50 540 372 80.4" > <path id="path1" d="m18.9 529.4c1.1 2.2 1.7 4.6 1.7 7.1 0 2.4-0.6 4.8-1.7 6.9l36.9 0c17.1 0 11.1 14.8 13.5 34.9 7.3 27.3 35.9 38.1 62.6 41.7-1.5-2.4-4.3-7.9-4.3-10.9 0-3.1 0.9-5.7 2.7-8.3-23.3-1.1-29.9-7.3-39.3-22.3-4.8-11.4 5.7-49.2-28.7-49.2z" style=" stroke:none; stroke-width:1; fill:#ded9d5; /> </svg> 

您的代码绘制了一个闭合路径，因此使用stroke-dashoffset属性的动画将沿着闭合路径绘制曲线。

以下示例。 动画的开头是将鼠标悬停在形状上方。

 <svg id="svg1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="420" height="180" viewBox="-50 540 372 80.4" > <path id="path1" d="m18.9 529.4c1.1 2.2 1.7 4.6 1.7 7.1 0 2.4-0.6 4.8-1.7 6.9l36.9 0c17.1 0 11.1 14.8 13.5 34.9 7.3 27.3 35.9 38.1 62.6 41.7-1.5-2.4-4.3-7.9-4.3-10.9 0-3.1 0.9-5.7 2.7-8.3-23.3-1.1-29.9-7.3-39.3-22.3-4.8-11.4 5.7-49.2-28.7-49.2z" style=" stroke:#4B0082; stroke-width:3; fill:#ded9d5; stroke-dasharray:571; stroke-dashoffset:571;"> <animate id="dash" attributeName="stroke-dashoffset" values="571;0;571" begin="path1.mouseover" restart="whenNotActive" dur="5s" fill="freeze" repeatCount="1"></animate> </path> </svg> 

begin="path1.mouseover" - 启动动画的命令，其中path1是路径标识符

restart="whenNotActive" - 防止重新动画

values="571;0;571" - 从571px到零并返回的路径上的动画

如果我正确地理解了问题的作者，则不需要动画路径线，而是用path填充由颜色形成的整个图形。

当路径未关闭时，很容易做到这一点 - 将线条的粗细增加到所需的值并使用动画stroke-dashoffset

要解决这些矛盾，您可以使用这种技术：在矢量编辑器中打开我们的代码，并绘制一个位于图中间的附加曲线。

这条线将被动画化。 要开始动画，请移动光标。

 <svg id="svg2" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="420" height="180" viewBox="-50 550 372 80.4" version="1.1"> <path d="m18.9 529.4c1.1 2.2 1.7 4.6 1.7 7.1 0 2.4-0.6 4.8-1.7 6.9l36.9 0c17.1 0 11.1 14.8 13.5 34.9 7.3 27.3 35.9 38.1 62.6 41.7-1.5-2.4-4.3-7.9-4.3-10.9 0-3.1 0.9-5.7 2.7-8.3-23.3-1.1-29.9-7.3-39.3-22.3-4.8-11.4 5.7-49.2-28.7-49.2z" style="fill:#F8F3EF;stroke-width:1; stroke:none;" /> <path style="stroke-dasharray:152;stroke-dashoffset:152; fill:none;stroke-width:2;stroke:yellowgreen;" d="m20.8 535.9c24.9 2.5 55.9-6.4 57.2 15.4 3.5 19.3-1.6 31.7 14 45.2 21.1 17.5 35.4 13 35.4 13"> <animate id="dash" attributeName="stroke-dashoffset" values="152;0" begin="svg2.mouseover" restart="whenNotActive" dur="3s" fill="freeze" repeatCount="1"> </animate> </path> </svg> 

接下来，增加线的粗细 - stroke-width: 20; 并获得所需的结果：

 <svg id="svg2" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="420" height="180" viewBox="-50 550 372 80.4" version="1.1"> <path d="m18.9 529.4c1.1 2.2 1.7 4.6 1.7 7.1 0 2.4-0.6 4.8-1.7 6.9l36.9 0c17.1 0 11.1 14.8 13.5 34.9 7.3 27.3 35.9 38.1 62.6 41.7-1.5-2.4-4.3-7.9-4.3-10.9 0-3.1 0.9-5.7 2.7-8.3-23.3-1.1-29.9-7.3-39.3-22.3-4.8-11.4 5.7-49.2-28.7-49.2z" style="fill:#F8F3EF;stroke-width:1; stroke:none;" /> <path style="stroke-dasharray:152;stroke-dashoffset:152; fill:none;stroke-width:20;stroke:yellowgreen;" d="m20.8 535.9c24.9 2.5 55.9-6.4 57.2 15.4 3.5 19.3-1.6 31.7 14 45.2 21.1 17.5 35.4 13 35.4 13"> <animate id="dash" attributeName="stroke-dashoffset" values="152;0" begin="svg2.mouseover" restart="whenNotActive" dur="3s" fill="freeze" repeatCount="1"> </animate> </path> </svg> 

解决方案使用filter

启动解决方案的想法 - 悬停@Holger Will上的SVG Filter标签

填充路径的动画是通过改变滤波器dx的属性 - 沿X轴的偏移来实现的。

 <svg id="svg1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="420" height="180" viewBox="-50 540 372 80.4"> <defs> <filter id="violet-fill" x="0%" y="0%"> <feFlood flood-color="#F8F3EF" /> <feOffset dx="0"> <animate id="anim" attributeName="dx" values="0;115;0" dur="5s" begin="path1.mouseover" restart="whenNotActive" fill="freeze"/> </feOffset> <feComposite operator="in" in2="SourceGraphic" /> <feComposite operator="over" in2="SourceGraphic" /> </filter> </defs> <style> path { filter: url(#violet-fill); } </style> <path id="path1" d="m18.9 529.4c1.1 2.2 1.7 4.6 1.7 7.1 0 2.4-0.6 4.8-1.7 6.9l36.9 0c17.1 0 11.1 14.8 13.5 34.9 7.3 27.3 35.9 38.1 62.6 41.7-1.5-2.4-4.3-7.9-4.3-10.9 0-3.1 0.9-5.7 2.7-8.3-23.3-1.1-29.9-7.3-39.3-22.3-4.8-11.4 5.7-49.2-28.7-49.2z" style=" stroke:#4B0082; fill:#F8F3EF;"/> </svg> 

借助动画filter的第二个解决方案

 <svg id="svg1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="420" height="180" viewBox="-50 540 372 80.4"> <defs> <filter id="violet-fill" x="0%" y="0%"> <feFlood flood-color="#ded9d5" /> <feOffset dx="0"> <animate id="anim" attributeName="dx" values="0;115;0" dur="5s" begin="path1.mouseover" restart="whenNotActive" fill="freeze"/> </feOffset> <feComposite operator="in" in2="SourceGraphic" /> <feComposite operator="over" in2="SourceGraphic" /> </filter> </defs> <style> path { filter: url(#violet-fill); } </style> <path id="path1" d="m18.9 529.4c1.1 2.2 1.7 4.6 1.7 7.1 0 2.4-0.6 4.8-1.7 6.9l36.9 0c17.1 0 11.1 14.8 13.5 34.9 7.3 27.3 35.9 38.1 62.6 41.7-1.5-2.4-4.3-7.9-4.3-10.9 0-3.1 0.9-5.7 2.7-8.3-23.3-1.1-29.9-7.3-39.3-22.3-4.8-11.4 5.7-49.2-28.7-49.2z" style=" stroke-width:1; stroke:violet; fill:#4B0082;"/> </svg> 

Answer 2

我会添加一个类而不是ID，并在类上使用CSS“：hover”。

或者你可以同时拥有两者。

这是交互式svg的一个很棒的页面。 SVG中的鼠标悬停效果

示例代码，必须删除svg中的硬编码样式才能使css生效。

 .effective{ fill:red; } .effective:hover{ fill:black; transition: fill 2s ease-in; } 

 <svg width="210mm" height="450mm" viewBox="0 0 744.09449 159.44881"> <path d="m 18.929688,529.44141 c 1.140051,2.17164 1.739409,4.60197 1.74414,7.07226 -0.0033,2.41521 -0.575072,4.79339 -1.666016,6.92969 l 36.876954,0 c 17.101683,0 11.124297,14.78094 13.525192,34.92207 7.304679,27.32129 35.935342,38.13518 62.612922,41.73111 -1.5457,-2.42739 -4.33484,-7.94712 -4.33733,-10.8524 0.005,-3.11453 0.90166,-5.74434 2.66254,-8.27277 -23.30774,-1.1068 -29.8766,-7.34118 -39.33413,-22.29658 -4.829034,-11.35821 5.68082,-49.23338 -28.703413,-49.23338 z" transform="translate(0.5714286,1.42857)" class="effective" /> </svg>