SVG线旋转和动画

我想要在两点之间移动一条线。SVG线旋转和动画

为了只需要一个渐变，我使用transform来旋转线条。

有关详细信息，请参阅本：SVG gradients direction

现在，当我申请就可以了奇怪的行为行动画。这不是真正的目的地附近的任何地方，我真的不明白发生了什么。

这是特别奇怪的是，如果我删除rotate变换，线路进入正确的点（但显然它没有正确的梯度）。

<svg height="670.9" width="1920"> 
    <defs> 
     <linearGradient y2="100%" x2="100%" y1="0%" x1="0%" id="linegradred"> 
      <stop style="stop-color:#F70D1A;stop-opacity:0" offset="0%" /> 
      <stop style="stop-color:#F70D1A;stop-opacity:0.3" offset="50%" /> 
      <stop style="stop-color:#F70D1A;stop-opacity:0.8" offset="100%" /> 
     </linearGradient> 
    </defs> 
    <circle cx="964" cy="426" r="4" stroke="black" fill="black" opacity="0.5" class="circle_loc"/> 
    <circle cx="924" cy="230" r="4" stroke="black" fill="black" opacity="0.5" class="circle_loc" /> 
    <line class="svg_line_red" id="line_1442197044254" x1="964" y1="426" fill="url(#linegradred)" stroke="url(#linegradred)" x2="1030" y2="492" transform="rotate(-146.5346206536447 964 426)"> 
     <animate attributeName="x1" attributeType="XML" to="924" fill="freeze" dur="1.1s" /> 
     <animate attributeName="y1" attributeType="XML" to="230" fill="freeze" dur="1.1s" /> 
     <animate attributeName="x2" attributeType="XML" to="924" fill="freeze" dur="1s" /> 
     <animate attributeName="y2" attributeType="XML" to="230" fill="freeze" dur="1s" /> 
    </line> 
    <circle cx="590" cy="344" r="4" stroke="black" fill="black" opacity="0.5" class="circle_loc" /> 
    <circle cx="924" cy="230" r="4" stroke="black" fill="black" opacity="0.5" class="circle_loc" /> 
    <line class="svg_line_red" id="line_1442197045251" x1="590" y1="344" fill="url(#linegradred)" stroke="url(#linegradred)" x2="707" y2="461" transform="rotate(-63.84566422168709 590 344)"> 
     <animate attributeName="x1" attributeType="XML" to="924" fill="freeze" dur="1.1s" /> 
     <animate attributeName="y1" attributeType="XML" to="230" fill="freeze" dur="1.1s" /> 
     <animate attributeName="x2" attributeType="XML" to="924" fill="freeze" dur="1s" /> 
     <animate attributeName="y2" attributeType="XML" to="230" fill="freeze" dur="1s" /> 
    </line> 
    <circle cx="771" cy="363" r="4" stroke="black" fill="black" opacity="0.5" class="circle_loc" /> 
    <circle cx="924" cy="230" r="4" stroke="black" fill="black" opacity="0.5" class="circle_loc" /> 
    <line class="svg_line_red" id="line_1442197046253" x1="771" y1="363" fill="url(#linegradred)" stroke="url(#linegradred)" x2="838" y2="430" transform="rotate(-85.99981423948691 771 363)"> 
     <animate attributeName="x1" attributeType="XML" to="924" fill="freeze" dur="1.1s" /> 
     <animate attributeName="y1" attributeType="XML" to="230" fill="freeze" dur="1.1s" /> 
     <animate attributeName="x2" attributeType="XML" to="924" fill="freeze" dur="1s" /> 
     <animate attributeName="y2" attributeType="XML" to="230" fill="freeze" dur="1s" /> 
    </line> 
</svg>

这里有一个小提琴：https://jsfiddle.net/qj7z2hhr/

任何帮助理解为什么这个行为一样，将不胜感激。

来源

2015-09-14 Loïc

在SVG文件中，层次结构中较低的任何内容都受其祖先元素中的内容的影响。因此，动画中的所有坐标也会受到您应用于其父元素（线条）的旋转的影响。

如果你想修复它，你将不得不在（即高于）旋转后应用翻译动画。有一种方法可以做到这一点，就是围绕着一个组。将旋转应用于该行，并向该组应用animateTransform。

更新

其实我的建议是行不通的。我没有考虑到你正在为这条线的起点和终点制定动画。

但我有另一个建议。使每条线成为基于（0,0）的矢量，并且长度与原始线相匹配。 I .:

x1=0 y1=0 x2=(x2-x1) y2=(y2-y2)

然后，您可以创建所需的动画作为三个动画组件的组合。

原始起点和终点之间的翻译。

比例从1到0，使开始和结束收敛到一个单点

固定旋转变换，以使你的线和梯度点在正确的方向

这里的结果。我刚刚实施了两行以向你展示它的工作原理。我会让你决定这是否比只有多个渐变更简单，或者不是。

<svg viewBox="0 0 1920 670.9"> <defs> <linearGradient y2="100%" x2="100%" y1="0%" x1="0%" id="linegradred"> <stop style="stop-color:#F70D1A;stop-opacity:0" offset="0%" /> <stop style="stop-color:#F70D1A;stop-opacity:0.3" offset="50%" /> <stop style="stop-color:#F70D1A;stop-opacity:0.8" offset="100%" /> </linearGradient> </defs> <circle cx="964" cy="426" r="4" stroke="black" fill="black" opacity="0.5" class="circle_loc"/> <circle cx="924" cy="230" r="4" stroke="black" fill="black" opacity="0.5" class="circle_loc" /> <line class="svg_line_red" id="line_1442197044254" x2="66" y2="66" fill="url(#linegradred)" stroke="url(#linegradred)"> <animateTransform attributeName="transform" attributeType="XML" type="translate" from="964 426" to="924 230" dur="1.1s" additive="sum" fill="freeze" /> <animateTransform attributeName="transform" attributeType="XML" type="scale" from="1" to="0" dur="1.1s" additive="sum" fill="freeze" /> <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="-146.5" to="-146.5" dur="1.1s" additive="sum" fill="freeze" /> </line> <circle cx="590" cy="344" r="4" stroke="black" fill="black" opacity="0.5" class="circle_loc" /> <circle cx="924" cy="230" r="4" stroke="black" fill="black" opacity="0.5" class="circle_loc" /> <line class="svg_line_red" id="line_1442197045251" x2="117" y2="116" fill="url(#linegradred)" stroke="url(#linegradred)"> <animateTransform attributeName="transform" attributeType="XML" type="translate" from="590 344" to="924 230" dur="1.1s" additive="sum" fill="freeze" /> <animateTransform attributeName="transform" attributeType="XML" type="scale" from="1" to="0" dur="1.1s" additive="sum" fill="freeze" /> <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="-63.8" to="-63.8" dur="1.1s" additive="sum" fill="freeze" /> </line> </svg>

来源

2015-09-14 06:51:50

请你说明一个基本的例子，你的答案？ –

我已经更新了我的答案。 –

这就像一个魅力，谢谢你。 –

SVG线旋转和动画

回答

相关问题