SVG，如何将一条线从x1，y1动画到x2，y2？

Question

SVG，如何将一条线从x1，y1动画到x2，y2？

10

animate属性的文档非常简略。不幸的是，W3对SVG的文档方式非常难以理解和交叉引用。

我已经让它工作了（至少有进展）...... 应该知道要将秒转换为毫秒（掌击额头）

我已经更新了代码以反映我的下一个步骤（遇到了另一个问题）。当我有两条线条动画时，另一条在下一条开始时消失了，如何使每条线条在动画完成后都保留？... 我认为这与“fill”属性有关，但“fill = freeze”会将线条转换为垂直。

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
         "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="1020" height="768" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="background-color:rgb(255,255,255)" >
<g style="stroke:black" >
<line x1="242.25" y1="216" x2="242.25" y2="216" style="stroke:rgb(0,0,0);stroke-width:1;" >
<animate attributeName="x2" attributeType="XML" from="242.25" to="219.9375" begin="0ms" dur="117ms" />
<animate attributeName="y2" attributeType="XML" from="216" to="170.999808" begin="0ms" dur="117ms" />
</line>
<line x1="219.9375" y1="170.999808" x2="219.9375" y2="170.999808" style="stroke:rgb(0,0,0);stroke-width:1;" >
<animate attributeName="x2" attributeType="XML" from="219.9375" to="207.1875" begin="117ms" dur="83ms" />
<animate attributeName="y2" attributeType="XML" from="170.999808" to="153.149952" begin="117ms" dur="83ms" />
</line>
</g>
</svg>

更新：我最近让它正常工作了，这是解决方案

在您的animate元素中添加一个fill属性，其值为freeze。就像这样

<animate attributeName="y2" attributeType="XML" ... fill="freeze" />

这里是我实现的一些效果：仅适用于兼容 SVGAnimate 的浏览器！[Opera、Safari、Chrome]，抱歉没有 Firefox 或 IE …提醒一下，它会轻微占用 CPU。

- Sandwich

2个回答

2

我不确定这是否符合您的要求，但您可能想看一下Lazy Line Painter jQuery插件。

Lazy Line Painter是一个jQuery插件，允许您进行SVG路径动画。它通过将您的SVG线条图形转换为JavaScript代码来工作，然后您导入jQuery、Raphaël和Lazy Line Painter jQuery插件，就完成了。

Lazy Line Painter插件允许您执行路径动画。这意味着如果您有一张仅由线条组成的图像（具有起点和终点，没有填充），那么此插件将允许您执行动画，以跟踪线条以绘制图片。

- Hirvesh

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Leo · Accepted Answer

这个可以运行（在Opera中测试过）：

<?xml version="1.0" encoding="iso-8859-1"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" 
            "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> 
<svg width="480" height="320" xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"> 
    <g style="stroke:black" > 
        <line x1="0" y1="0" x2="50" y2="50" style="stroke:rgb(0,0,0);stroke-width:20;" > 
            <animate attributeName="x2" from="50" to="100" begin="1s" dur="2s" /> 
            <animate attributeName="y2" from="50" to="100" begin="1s" dur="2s" /> 
        </line> 
    </g> 
</svg>

我看到你的代码存在两个主要问题：

该行在图像外部（宽度为480，x1为585）
时间值不明确（你正在使用百分之一秒的单位！！！）