当改变线条方向时，SVG标记点指向错误方向

Question

当改变线条方向时，SVG标记点指向错误方向

3

我有带箭头的线条。当线条指向上、右和下时，自动功能可以正确定位箭头。但是当线条从右到左时，箭头末端指向右侧而不是左侧。有人知道原因吗？谢谢。

<marker id="markerArrow" viewBox="0 0 12 12" refX="0" refY="6" 
markerUnits="strokeWidth" markerWidth="8" markerHeight="6" orient="auto">
<path d="M 0 0 L 12 6 L 0 12 z" style="fill: blue;" /></marker></defs>

- Nancymic

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Alexandr_TT · Accepted Answer

你正确地注意到了标记的方向取决于画线的方向。你的标记是用尖端向右绘制的。

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"    xmlns:xlink="http://www.w3.org/1999/xlink"
   width="300" height="300" viewBox="0 0 200 200" >  
  
<!--<defs>
 <marker id="markerStart" viewBox="0 0 12 12" refX="0" refY="6" 
markerUnits="strokeWidth" markerWidth="8" markerHeight="6" orient="auto">
<path d="M 0 0 L 12 6 L 0 12 z" style="fill: blue;" />
</marker> 

</defs> -->

<path d="M 0 0 L 12 6 L 0 12 z" style="fill: blue;" />
</svg>

标记可以附加在行的开头-marker-start和行的末尾- marker-end

该线从左侧绘制M10,100到右侧L190.100

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"    xmlns:xlink="http://www.w3.org/1999/xlink"
   width="300" height="300" viewBox="0 0 200 200" >  
  
<defs>
<marker id="markerStart" viewBox="0 0 12 12" refX="0" refY="6" 
markerUnits="strokeWidth" markerWidth="8" markerHeight="6" orient="auto">
<path d="M 0 0 L 12 6 L 0 12 z" style="fill: blue;" />
</marker> 
</defs>

<path d="M10,50 L190,100" stroke="black" marker-start="url(#markerStart)" marker-end="url(#markerStart)"  />
<path d="M 0 0 L 12 6 L 0 12 z" style="fill: blue;"/>
</svg>

现在要从右到左画一条线

<path d="M190,100 L10,100" />

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"    xmlns:xlink="http://www.w3.org/1999/xlink"
   width="300" height="300" viewBox="0 0 200 200" >  
  
<defs>
<marker id="markerStart" viewBox="0 0 12 12" refX="0" refY="6" 
markerUnits="strokeWidth" markerWidth="8" markerHeight="6" orient="auto">
<path d="M 0 0 L 12 6 L 0 12 z" style="fill: blue;" />
</marker> 
</defs>

<path d="M190,50 L10,100" stroke="black" marker-start="url(#markerStart)" marker-end="url(#markerStart)"  />
<path d="M 0 0 L 12 6 L 0 12 z" style="fill: blue;"/>
</svg>

有两种方法来解决这个问题：

在 section 中绘制并定义两个指向不同方向的标记，并根据线的方向使用它们

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"    xmlns:xlink="http://www.w3.org/1999/xlink"
   width="300" height="300" viewBox="0 0 200 200" >  
  
<defs>
<marker id="markerStart" viewBox="0 0 12 12" refX="0" refY="6" 
markerUnits="strokeWidth" markerWidth="8" markerHeight="6" orient="0">
<path d="M12 0 L 0 6 L 12 12 z" style="fill: red;" />
</marker>
<marker id="markerEnd" viewBox="0 0 12 12" refX="0" refY="6" 
markerUnits="strokeWidth" markerWidth="8" markerHeight="6" orient="auto">
<path d="M 0 0 L 12 6 L 0 12 z" style="fill: blue;" />
</marker> 


</defs>

<path d="M10,100 L190,100" stroke="black" marker-start="url(#markerStart)" marker-end="url(#markerEnd)"  />

     <!-- Marker Start -->
<path d="M12 0 L 0 6 L 12 12 z" style="fill: red;" />
</svg>

将其中一个标记旋转180度 orient ="180"

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"    xmlns:xlink="http://www.w3.org/1999/xlink"
   width="300" height="300" viewBox="0 0 200 200" >  
  
<defs>
<marker id="markerStart" viewBox="0 0 12 12" refX="0" refY="6" 
markerUnits="strokeWidth" markerWidth="8" markerHeight="6" orient="auto">
<path d="M 0 0 L 12 6 L 0 12 z" style="fill: blue;" />
</marker> 

<marker id="markerEnd" viewBox="0 0 12 12" refX="0" refY="6" 
markerUnits="strokeWidth" markerWidth="8" markerHeight="6" orient="180">
<path d="M 0 0 L 12 6 L 0 12 z" style="fill: red;" />
</marker>
</defs>

<path d="M10,100 L190,100" stroke="black" marker-start="url(#markerEnd)" marker-end="url(#markerStart)"  />

</svg>

更新

中间标记

仅用于线条的拐角处。在完全直线上不可见。在下面的示例中，marker-mid="url(#markerRight)为红色。

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"    xmlns:xlink="http://www.w3.org/1999/xlink"
   width="300" height="300" viewBox="0 0 200 200" >  
  
<defs>
<marker id="markerRight" viewBox="0 0 12 12" refX="6" refY="6" 
markerUnits="strokeWidth" markerWidth="10" markerHeight="10" orient="auto-start-reverse">
<path d="M12 0 L 0 6 L 12 12 z" style="fill: red;" />
</marker>
<marker id="markerLeft" viewBox="0 0 12 12" refX="6" refY="6" 
markerUnits="strokeWidth" markerWidth="10" markerHeight="10" orient="auto">
<path d="M 0 0 L 12 6 L 0 12 z" style="fill: blue;" />
</marker> 
</defs>

<path fill="none" d="M10,100 50,50 100,150 180,50 190,150" stroke="black" marker-start="url(#markerLeft)" marker-mid="url(#markerRight)" marker-end="url(#markerLeft)"  />

</svg>