Question

假设我有一个跟随标记（我想在dom中只有一个标记元素）：

<marker id="arrow" viewBox="0 -5 10 10" refX="22.5" refY="0" markerWidth="20" markerHeight="20" orient="auto"><path d="M0,-5L10,0L0,5" fill="#000000"></path></marker>

我用它在线上画箭头：

<line stroke="black" stroke-width="0.5" x1="1190.5337908659556" y1="814.1321248143822" x2="1183.09985813189" y2="-58.79906521075237" marker-end="url(#arrow)" display="inline"></line>
<line stroke="black" stroke-width="0.5" x1="797.4477436706952" y1="325.5996932062993" x2="877.7838866381225" y2="631.7793113188723" marker-end="url(#arrow)" display="inline"></line>

有没有办法通过在引用标记的线元素上使用某个属性来沿着线移动箭头？

Answer 1

您需要为应用标记的行的终点设置动画。

在下面的示例中，我添加了第二行。然后，我们将x2和y2属性从该行的开头设置为结尾。所以它从零长度开始，最终与原始线相同。

<svg viewBox="600 300 600 400">
  <defs>
    <marker id="arrow" viewBox="0 -5 10 10" refX="10" refY="0" markerWidth="20" markerHeight="20" orient="auto"><path d="M0,-5L10,0L0,5" fill="#000000"></path></marker>
  </defs>

  <!-- original path -->
  <line stroke="black" stroke-width="0.5" x1="797.4477436706952" y1="325.5996932062993" x2="877.7838866381225" y2="631.7793113188723"/>

  <!-- original path -->
  <line stroke="none" stroke-width="0.5" x1="797.44" y1="325.59" x2="797.44" y2="325.59" marker-end="url(#arrow)">

     <animate attributeName="x2" from="797.44" to="877.78" dur="2s" fill="freeze"/>
     <animate attributeName="y2" from="325.59" to="631.77" dur="2s" fill="freeze"/>
  </line>
</svg>

Answer 2

使用CSS似乎无法做到这一点。来自spec：

‘display’属性不适用于‘marker’元素

标记不是直接渲染的，因此用CSS移动元素（转换/平移，定位，边距等）的常用方法都不适用于它们。

要为标记设置动画，我认为您需要使用JS直接为其上的refX和refY值设置动画。像Anime之类的东西可以帮助解决这个问题。

使用引用元素上的属性移动（样式）标记

2 个答案: