我会将箭头放在路径的不同区域。实际上我正在使用 textPath。
textPath 的问题在于它与路径相关联，我无法在它们之间放置元素(例如路径上方但箭头下方的圆圈)。此外，我仅限于文本字符来绘制箭头。
是否可以在没有 textPath 的情况下做同样的事情？我会使用自己绘制的箭头并按照其方向将其放在线上吗？
<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/textPath -->
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<!-- to hide the path, it is usually wrapped in a <defs> element -->
<!-- <defs> -->
<circle cx="75" cy="45" r="5" fill="blue"/>
<path id="MyPath" fill="none" stroke="red"
d="M10,90 Q90,90 90,45 Q90,10 50,10 Q10,10 10,40 Q10,70 45,70 Q70,70 75,50" />
<!-- </defs> -->
<text dominant-baseline ='central'>
<textPath href="#MyPath" startOffset='100%' text-anchor='middle'>⯈</textPath>
</text>
</svg>最佳答案
这是js解决方案:
let len = MyPath.getTotalLength()
requestAnimationFrame(draw);
function draw(t){
requestAnimationFrame(draw);
let p1 = MyPath.getPointAtLength((t/33)%len);
let p2 = MyPath.getPointAtLength((t/33)%len + 10);
let a = Math.atan2(p2.y - p1.y, p2.x - p1.x) * 180 / Math.PI
triangle.setAttribute('transform', `translate(${p1.x},${p1.y})rotate(${a})`)
}<body style="overflow:hidden;margin:0">
<svg viewBox="0 0 100 100" width=100vw height=100vh>
<path id="MyPath" fill="none" stroke="red"
d="M10,90 Q90,90 90,45 Q90,10 50,10 Q10,10 10,40 Q10,70 45,70 Q70,70 75,50" />
<circle cx="75" cy="45" r="5" fill="blue"/>
<path id=triangle d="m0,0 v-5l10,5l-10,5z"/>
</svg>
</body>关于javascript - 在不使用 textPath 的情况下在 svg 路径上绘制箭头，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57923530/