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

Question

我的线条末尾有箭头。 当线条指向上方、右侧和向下时，Auto 正在正确调整箭头的方向。当线条从右向左移动时，箭头以指向右而不是向左结束。 谁能明白为什么会这样？谢谢

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