SVG marker-mid在路径上的特定点上 [英] SVG marker-mid on specific point on path

问题描述

我有一些代码在画布上生成pathes。
路径对象看起来类似于：

 < path class =linkd =M450,215 .L265,236L225,236style =stroke-width：1;>< / path> 
  

和视图（a，b，c字母只是为了解释问题）：

我的问题是我要画一些箭头标记）在线的中间，
在a到b之间，
，但是当我创建一个标记并做一个marker-mid属性，它在b点上生成。

我试图在a和b之间做一些点，但后来mark-mid在b点上都有箭头。

来自WEB API文档：

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

如何禁用标记点b？
或者我怎么能像a-b之间的箭头那样做？
谢谢！

解决方案

有时它不是那么容易分裂的路径在任何你喜欢的点。然后，您可以使用 startOffset 在路径上使用文本在路径上的任意点放置箭头...

path {fill：none;中风：红色stroke-width：3} text {font-size：35px; fill：red; dominant-baseline：central}

 < svg viewBox = 0 0 500 500width =300pxheight =300px> < path class =linkid =path1d =M0 0 L200 400A300 300 0 0 1 490 150>< / path> < text> < textPath xlink：href =＃path1startOffset =10％>➤< / textPath> < textPath xlink：href =＃path1startOffset =20％>➤< / textPath> < textPath xlink：href =＃path1startOffset =30％>➤< / textPath> < textPath xlink：href =＃path1startOffset =40％>➤< / textPath> < textPath xlink：href =＃path1startOffset =50％>➤< / textPath> < textPath xlink：href =＃path1startOffset =60％>➤< / textPath> < textPath xlink：href =＃path1startOffset =70％>➤< / textPath> < textPath xlink：href =＃path1startOffset =80％>➤< / textPath> < textPath xlink：href =＃path1startOffset =90％>➤< / textPath> < / text>< / svg>  

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>

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

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.

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.

from WEB API documentation :

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.

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

解决方案

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 marker-mid在路径上的特定点上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！