不使用textPath在svg路徑上繪制箭頭
[英]Draw arrow on svg path without using textPath
問題描述
我會將箭頭放置在路徑的其他區域。 實際上我正在使用textPath 。
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>
2 個解決方案
解決方案1
4 已采納 2019-09-13 12:53:10
這是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>
解決方案2
1 2019-09-19 10:39:11
textPath方法允許您使用文本字符的路徑
可以使用unicode三角形符號： ⏵ ⏵
- 一個三角形沿路徑運動的動畫示例
<svg width="50%" height="50%" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <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" /> <text font-size="20" font-family="Times New Roman" fill="black" > <textPath xlink:href="#MyPath" startOffset='0%' > <tspan dx="0" dy="6"> ⏵ </tspan> <animate dur="10s"repeatCount="1" attributeName="startOffset" values="0%;95.6%" fill="freeze"/> </textPath> </text> </svg>
- 動畫幾個三角形運動的例子
<svg width="50%" height="50%" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <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" /> <text font-size="20" font-family="Times New Roman" fill="black" > <textPath xlink:href="#MyPath" startOffset='0%' > <tspan dx="0" dy="6"> ⏵ </tspan> <tspan dx="-19" fill="red"> ⏵ </tspan> <tspan dx="-19" fill="gold" > ⏵ </tspan> <tspan dx="-19" fill="green" > ⏵ </tspan> <animate dur="10s" repeatCount="1" attributeName="startOffset" values="0%;89%" fill="freeze"/> </textPath> </text> </svg>
- 使用其他Unicode字符的示例
<svg width="600" height="400" viewBox="100 100 400 300"> <path id="pathTrain" d="M100,200 C100,100 250,100 250,200 S 400,300 400,200" stroke="grey" fill="none"/> <text font-size="32" font-family="Times New Roman" fill="black" > <textPath id="result" xlink:href="#pathTrain"> <tspan dx="0" > 🚅 </tspan> <tspan dx="-15"> 🚃 </tspan> <tspan dx="-15"> 🚃</tspan> <tspan dx="-15"> 🚃</tspan> <tspan dx="-15">🚃</tspan> <tspan dx="-15" > 🚅 </tspan> <animate dur="7s" repeatCount="indefinite" attributeName="startOffset" values="55%;0%;55%"/> </textPath> </text> </svg>
SVG文本路徑-動畫化startOffset（向下滑動SVG路徑的文本）-在JS中
[英]SVG Textpath - animate startOffset (text to slide down SVG path) - in JS
有沒有辦法在SVG文本路徑上圍繞單個字母繪制一個矩形
[英]Is there a way to draw a rectangle around single letters on a SVG textpath
使用canvas，SVG和js在兩個div之間繪制一條箭頭或一條線
[英]draw an arrow or line between two divs using canvas, SVG and js
導入FabricJS后，SVG textPath是否未附加到鏈接路徑？
[英]SVG textPath not attached to the linked path after FabricJS import?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.