更改线条方向时，SVG 标记指向错误的方向

Question

我的线条末尾带有箭头。当线条向上、向右和向下时，自动功能会正确定位箭头方向。当线从右向左延伸时，箭头结束时指向右侧而不是左侧。谁能明白这是为什么吗？谢谢

<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>

Answer 1

您正确地注意到标记的方向取决于绘制线条的方向。您的标记的笔尖位于右侧。

<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>

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

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

<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>

2. 将其中一个标记旋转 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>