在svg曲线中间添加svg图标
在svg曲线中间添加svg图标
提问于 2018-02-09 08:51:48
我有这样一条曲线svg线
<path d="M70,260 C105,260 126,330 160,330"
style="stroke: #ff4444;stroke-width:2; fill:none;"/>我想要的是在我的行中间添加另一个svg (如149657)，指向终点。
有什么想法吗？
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-02-09 12:46:55
实现这一结果的一种方法是退化动画：
- 定义标记形状(下面示例中为
obj1) - 将标记定位在曲线的开头(下面是
track1；这是您的示例中的路径定义)。 - 通过一些特定的设置，指定标记形状沿曲线的动画运动：
- Explicit positioning along the track using `keyTimes`, `keyPoints` attributes, limiting the range of positions to exactly one point: the midpoint of the curve
- Infinite duration, infinite repeat
- Auto-rotation of the shape according to the orientation of the track curve ( `rotate` attribute )
实际上，根本没有动画，但形状定位在曲线的中心，正确的方向。
示例
<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>
Stack Overflow用户
发布于 2018-02-09 12:33:48
有许多方法可以做到这一点。
一种方法是“欺骗”一点，并使用<textPath>和箭头字符。
SVG marker-mid on specific point on path
这有点麻烦，并不是所有浏览器都能可靠地工作，但它可能足以满足您的需要。
另一种方法是将路径分成两部分(使用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()方法来查找路径中心的坐标。然后在那个位置定位一个三角形。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/48701971
复制相关文章
相似问题
腾讯云开发者
