【问题标题】:SVG: Path: Moveto (M) is relative from origin not absolute to the gridSVG:路径:Moveto(M)是相对于原点而不是绝对的网格
【发布时间】:2020-11-19 17:49:01
【问题描述】:

我有一个非常严重的问题。

让我们说:

viewbox="0 0 50 50"

<circle id="circle1_1"  cx="25" cy="25" r="1" opacity="1" fill="#FF0000">
    <animateMotion
        dur="5s"
        path="M -10 -10 C 30 20, 40 50, 25 25"
    />
</circle>

现在的问题:

问题是:M 是大写的,所以我不知道为什么它不起作用..

而不是在 Viewbox 中移动到 -10,-10,而是移动到 15,15 等于 (25 - 10), (25 -10)...

我完全不知道我应该在这里做什么......我只想让圆圈从 -10 -10 开始(在我的项目中视图框之外的任何地方)并在 25、25 结束并留在那里......

起始位置是用random_int生成的,我生成了一堆圆圈……

如何实现 Moveto (M) 将采用绝对坐标而不是相对坐标?

【问题讨论】:

  • 或许将 cx 和 cy 设置为 0。
  • animateMotion 中的路径表示一组变换,因此是您正在制作动画的元素位置的偏移量。您不能将其设置为绝对点(您可以使用 Javascript 来做到这一点。)
  • 解决了...我只是不给它位置,并在第一个动画之后重复 999h 的动画并将其移动到最终位置

标签: svg path absolute


【解决方案1】:

已解决:

<circle id="circle3_1" r="10" opacity="1" fill="#FF0000">
    <animateMotion
        dur="5"
        path="MStartX StartY C -101 -1010,-195 141, FinalX FinalY"
        fill="freeze"/>
</circle>

【讨论】:

猜你喜欢
  • 1970-01-01
  • 2016-11-23
  • 2016-11-14
  • 1970-01-01
  • 2010-09-17
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多