时间戳

首页 > 解决方案 > 更改线方向时，SVG 标记指向错误的方向

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

问题描述

我在末尾有带箭头的线条。当线条指向上、右和下时，自动正在努力正确定位箭头。当线从右到左时，箭头以向右而不是向左结束。谁能明白这是为什么？谢谢

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

标签： svg

解决方案

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

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

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

推荐阅读