SVG，为从x1，y1到x2，y2的线设置动画？ [英] SVG, animate a line from x1,y1 to x2,y2?

问题描述

动画属性非常宽松地记录在案。不幸的是，W3记录SVG的方式非常难以理解和交叉引用。

The animate property is very loosely documented. And unfortunately for me, the way the W3 documents SVG is VERY difficult understand and cross reference.

我已经做好了工作（至少向前迈进了一步）...应该知道可以将秒转换为毫秒（拍打，额头）

I'VE GOTTEN IT TO WORK (... a step forward at least)... should've known to convert seconds to milliseconds (slaps, forehead)

我已经更新了代码以反映我的下一个踏脚石（遇到了另一个问题）。当我有两条线进行动画处理时，另一条线在下一行开始时消失，我该如何制作动画，以便每条线在动画后都保持不变？ ...我认为它与'fill'属性有关，但是'fill = freeze'将线转换为垂直线。

I've updated the code to reflect my next stepping stone (ran into another problem). When I have two lines animating, the other disappears when the next one starts, how do I make it so every line stays once it has been animated? ... I assume it has something to do with the 'fill' property, but 'fill=freeze' transforms the line to vertical.

<?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>

更新：
我最近开始使用它，这是解决方案

UPDATE: I recently got it to work, here's the solution

向您的动画元素添加填充属性，其值为冻结。像这样

Add a fill attribute to your animate element with the value of freeze. Like so

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

这是我实现的一些效果：仅限SVGAnimate兼容浏览器！！！ [Opera，Safari，Chrome]，对不起，没有Firefox或IE ...合理的警告，它会给CPU带来一些负担。

Here are some effects I achieved: SVGAnimate Compatible Browsers Only!!! [Opera, Safari, Chrome ], sorry no firefox or IE ... fair warning, it taxes CPU a bit.

推荐答案

这有效（在Opera中进行了测试）：

This works (tested in 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> 

我在您的代码中看到两个主要问题：

I see two major problems in your code:

• 该行在图像外部（宽度：480，x1：585）


• 时间值模糊（您在此处使用百分之一秒！！！） ）

这篇关于SVG，为从x1，y1到x2，y2的线设置动画？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！