动画SVG对象遵循与给定相同路径的图形不同的路径
我遇到了一个相当奇怪的情况,我似乎无法解释。我创建了一个SVG文件(见下文),其中包含一个动画圆圈和两个路径 已为已设置动画的圆指定了一条路径,并为黑色曲线指定了相同的路径。在大多数情况下,这些工作如预期的那样,圆沿着直线,直到到达曲线的最后一部分(在Inkscape中创建的路径) 在最后一条曲线上,圆圈明显偏离路径,并沿着红色曲线(我通过观察圆圈的走向绘制了红色曲线)。我已经研究了一段时间了,我把它传给了一些人,结果我们都是空的!它似乎在Chrome和Firefox中显示相同的行为动画SVG对象遵循与给定相同路径的图形不同的路径,svg,Svg,我遇到了一个相当奇怪的情况,我似乎无法解释。我创建了一个SVG文件(见下文),其中包含一个动画圆圈和两个路径 已为已设置动画的圆指定了一条路径,并为黑色曲线指定了相同的路径。在大多数情况下,这些工作如预期的那样,圆沿着直线,直到到达曲线的最后一部分(在Inkscape中创建的路径) 在最后一条曲线上,圆圈明显偏离路径,并沿着红色曲线(我通过观察圆圈的走向绘制了红色曲线)。我已经研究了一段时间了,我把它传给了一些人,结果我们都是空的!它似乎在Chrome和Firefox中显示相同的行为 <?
<?xml version='1.0' ?>
<svg id="bg" width="640" height="480" viewBox="0 0 640 480" xmlns="http://www.w3.org/2000/svg">
<!-- 0.3120145,28.545527 -->
<circle cx="0" cy="28" r="10" fill="red" >
<animateMotion attributeName="transform" type="translate" path="M 0,0
c 208.4152955,0 434.8417755,7.528088 526.1842855,11.292119 91.34251,3.764044 61.75268,101.629084 46.31451,116.685274
-15.43817,15.05615 -348.64533,0 -464.4316,0 -51.970376,0 -69.396244,-17.08125 -87.777293,15.80389
C -0.1965619,209.53694 501.31249,229.91057 504.89916,3.6862537" begin="0s" dur="10s" fill="freeze"/>
</circle>
<path d="M 0.3120145,28.545527
c 208.4152955,0
434.8417755,7.528088
526.1842855,11.292119
91.34251,3.764044
61.75268,101.629084
46.31451,116.685274
-15.43817,15.05615
-348.64533,0
-464.4316,0
-51.970376,0
-69.396244,-17.08125
-87.777293,15.80389
C -0.1965619,209.53694
501.31249,229.91057
504.89916,3.6862537"
fill="none" stroke="black" stroke-width="1"
/>
<path d="M 0.3120145,28.545527
c 208.4152955,0
434.8417755,7.528088
526.1842855,11.292119
91.34251,3.764044
61.75268,101.629084
46.31451,116.685274
-15.43817,15.05615
-348.64533,0
-464.4316,0
-51.970376,0
-69.396244,-17.08125
-87.777293,15.80389
C -0.1965619,250.53694
530.31249,245.91057
504.89916,10.6862537"
fill="none" stroke="red" stroke-width="0.5"
/>
<!--path class="SamplePath" d="M100,200 C100,100 250,100 250,200 S400,300 400,200" -- >
</svg>
通过将路径的起点更改为“m0 0”,您正在修改路径。尝试:
<svg id="bg" width="640" height="480" viewBox="0 0 640 480" xmlns="http://www.w3.org/2000/svg">
<circle cx="0" cy="28" r="10" fill="red" transform="translate(0, -30)">
<animateMotion attributeName="transform" type="translate" path="M 0.3120145,28.545527
c 208.4152955,0
434.8417755,7.528088
526.1842855,11.292119
91.34251,3.764044
61.75268,101.629084
46.31451,116.685274
-15.43817,15.05615
-348.64533,0
-464.4316,0
-51.970376,0
-69.396244,-17.08125
-87.777293,15.80389
C 0,210
501,230
505,3.7" begin="0s" dur="3s" fill="freeze"/>
</circle>
<path d="M 0.3120145,28.545527
c 208.4152955,0
434.8417755,7.528088
526.1842855,11.292119
91.34251,3.764044
61.75268,101.629084
46.31451,116.685274
-15.43817,15.05615
-348.64533,0
-464.4316,0
-51.970376,0
-69.396244,-17.08125
-87.777293,15.80389
C 0,210
501,230
505,3.7"
fill="none" stroke="black" stroke-width="1"/>
</svg>
真不敢相信这是一件如此简单的事情,确实解决了它。非常感谢!