我得到了一些在 Canvas 上生成路径的代码。 路径对象看起来与此类似:
<path class="link" d="M450,215.L265,236L225,236" style="stroke-width: 1;"></path>
在 View 中(a,b,c 字母只是为了说明问题):
我的问题是我想在线的中间画一些箭头(标记), 在“a”到“b”之间, 但是当我创建一个标记并执行标记中间属性时,它会在 b 点生成。
我试图在 a 和 b 之间做一些点,但是 marker-mid 在那里和 b 点上做了箭头。
来自 WEB API 文档:
The marker-mid defines the arrowhead or polymarker that shall be drawn at every vertex other than the first and last vertex of the given element or basic shape.
如何禁用 b 点上的标记? 或者我怎样才能在 a-b 之间制作类似箭头的东西? 谢谢!
最佳答案
有时候,在你喜欢的任何一点分割路径并不那么容易。然后,您可以使用路径上的文本和 startOffset
将“箭头”定位在路径上的任意点...
path {
fill: none;
stroke: red;
stroke-width: 3
}
text {
font-size: 35px;
fill: red;
dominant-baseline: central
}
<svg viewBox="0 0 500 500" width="300px" height="300px">
<path class="link" id="path1" d="M0 0 L200 400A300 300 0 0 1 490 150"></path>
<text >
<textPath xlink:href="#path1" startOffset="10%">➤</textPath>
<textPath xlink:href="#path1" startOffset="20%">➤</textPath>
<textPath xlink:href="#path1" startOffset="30%">➤</textPath>
<textPath xlink:href="#path1" startOffset="40%">➤</textPath>
<textPath xlink:href="#path1" startOffset="50%">➤</textPath>
<textPath xlink:href="#path1" startOffset="60%">➤</textPath>
<textPath xlink:href="#path1" startOffset="70%">➤</textPath>
<textPath xlink:href="#path1" startOffset="80%">➤</textPath>
<textPath xlink:href="#path1" startOffset="90%">➤</textPath>
</text>
</svg>
关于javascript - 路径上特定点上的 SVG 标记中间,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41105713/