路径上特定点上的 SVG 标记中间 [英] SVG marker-mid on specific point on path

问题描述

我得到了一些在画布上生成路径的代码.路径对象看起来与此类似:

I got some code that generates pathes on canvas. the path objects looks similar to this :

<path class="link" d="M450,215.L265,236L225,236" style="stroke-width: 1;"></path>

并在视图中(a、b、c 字母仅用于说明问题):

and on view (a,b,c letters are just for explaining the problem):

我的问题是我想在线的中间画一些箭头(标记)，在a"到b"之间，但是当我创建一个标记并执行一个标记中属性时，它会在 b 点上生成.

My problem is that I want to draw some arrow (marker) on the middle of the line, between "a" to "b", but when I create a marker and do a marker-mid attribute, its generates on b point.

我试图在 a 和 b 之间做一些点，但是标记中间在那里和 b 点上都做了箭头.

I've tried to do some point between a and b, but then marker-mid did the arrows both there and both on b point.

来自 WEB API 文档:

from WEB API documentation :

marker-mid 定义了要绘制的箭头或多边形标记在给定的第一个和最后一个顶点之外的每个顶点元素或基本形状.

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 之间制作类似箭头的东西?谢谢！

How can I disable the marker on point b? Or how can I make something like arrow between a-b ? Thanks !

推荐答案

有时在您喜欢的任何点分割路径并不是那么容易.然后，您可以使用带有 startOffset 的路径上的文本在路径上的任何点定位箭头"...

sometimes its not so easy to split the path at any point you like. Then you can use text on a path with startOffset to position an "arrow" at any point on a path...

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>

这篇关于路径上特定点上的 SVG 标记中间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！