Question

我有像这样的曲线svg线

<path d="M70,260 C105,260 126,330 160,330"  
    style="stroke: #ff4444;stroke-width:2; fill:none;"/>

我想要的是在指向终点的行中间添加另一个svg（如https://www.flaticon.com/free-icon/play-button_149657）。

任何想法？

Answer 1

实现结果的一种方法是退化动画：

定义标记形状（下例中的obj1）
将标记放在曲线的开头（track1下方;这是您示例中的路径定义）。
使用一些特定设置指定标记形状沿曲线的动画运动：
- 使用keyTimes，keyPoints属性沿着轨道进行显式定位，将位置范围限制为恰好一个点：曲线的中点
- 无限期，无限重复
- 根据曲目曲线的方向（rotate属性）

实际上根本没有动画，但是形状位于曲线的中心，方向正确。

示例

＆＃13;
＆＃13;
<html> <head> <title>SVG object centered on path</title> </head> <body> <svg width="200px" height="200px" viewBox="0 0 500 500" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" > <defs> <path id="obj1" d="M11.18,0 L-2.5,10 -2.5,-10 Z" stroke="black" stroke-width="1" fill="green" > </path> <path id="track1" d="M70,260 C105,260 126,330 160,330" stroke="#ff4444" stroke-width="2" fill="none" /> </defs> <use xlink:href="#track1"/> <use xlink:href="#obj1"> <animateMotion calcMode="linear" dur="infinite" repeatCount="infinite" rotate="auto" keyPoints="0.5;0.5" keyTimes="0.0;1.0" > <mpath xlink:href="#track1"/> </animateMotion> </use> </svg> </body> </html>
＆＃13;
＆＃13;
＆＃13;

Answer 2

有很多方法可以做到这一点。

一种方法是“欺骗”一点并使用<textPath>和箭头字符。

SVG marker-mid on specific point on path

这有点hacky，可能无法在所有浏览器上可靠地运行，但它可能足以满足您的需求。

另一种方法是将路径拆分为两个（使用De Casteljau's algorithm），然后使用<marker>。

<svg viewBox="0 200 200 200" width="400">
  <defs>
    <marker id="Triangle"
      viewBox="0 0 10 10" refX="0" refY="5" 
      markerUnits="strokeWidth"
      markerWidth="4" markerHeight="3"
      orient="auto">
      <path d="M 0 0 L 10 5 L 0 10 z" />
    </marker>
  </defs>

  <path d="M 70,260
           C 87.5,260 101.5,277.5 115.375,295
           C 129.25,312.5 143,330 160,330"  
        style="stroke: #ff4444; stroke-width:2; fill:none; marker-mid:url(#Triangle)"/>
</svg>

还有其他使用Javascript的方法。例如，您可以使用SVGPathElement.getPointAtLength()方法查找路径中心的坐标。然后在该位置放置一个三角形。

在svg曲线的中间添加svg图标

2 个答案: