路径上特定点上的 SVG 标记中间答案

【问题标题】：SVG marker-mid on specific point on path路径上特定点上的 SVG 标记中间
【发布时间】：2017-04-27 14:32:24
【问题描述】：

我得到了一些在画布上生成路径的代码。路径对象与此类似：

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

在视图中（a、b、c 字母仅用于解释问题）：

我的问题是我想在线条的中间画一些箭头（标记），在“a”到“b”之间，但是当我创建一个标记并做一个标记中间属性时，它会在 b 点上生成。

我试图在 a 和 b 之间做一些点，但随后 marker-mid 在那里和 b 点上都做了箭头。

来自 WEB API 文档：

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

如何禁用 b 点上的标记？或者我怎样才能在 a-b 之间制作类似箭头的东西？谢谢！

【问题讨论】：

您的path 是如何绘制的？要使用marker-mid，您可能必须分开路径。

标签： javascript d3.js svg

【解决方案1】：

有时在您喜欢的任何点分割路径并不容易。然后，您可以使用带有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>

【讨论】：

谢谢，它的作品很棒！您认为可以在 textPath 后面添加一些圆形背景吗？
结合网络字体一切皆有可能...cdn.rawgit.com/Holger-Will/misc/master/fonts/test.html
这很聪明
当我尝试将开始和结束标记（箭头）添加到 d3 生成的弧线时，这使我免于进行许多复杂的计算。
感谢@HolgerWill 提供的这个聪明的解决方案！我在另一篇文章中使用此解决方案使用 D3 创建箭头。 stackoverflow.com/questions/70312716/…

【解决方案2】：

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

您正在绘制一条带有顶点A、B 和C 的线，因此根据定义，标记将绘制在B。

如果您想在A 和B 之间绘制一个标记，您需要在A 到中点AB 到B 之间绘制一个path。

<svg width="200" height="150">
  <defs>
    <marker id="markerArrow" markerWidth="13" markerHeight="13" refX="2" refY="6" orient="auto">
      <path d="M2,2 L2,11 L10,6 L2,2" style="fill: #000;" />
    </marker>
  </defs>
  <path d='M0,0 L50,50 L100, 100' style='marker-mid:url(#markerArrow); stroke: #000'/>
  <path d='M100,100 L125, 100 L150, 100' style='marker-mid:url(#markerArrow); stroke: #000' />
</svg>

【讨论】：