问题描述：

上下文

我想要得到我正在创建的图形中的节点路径上的箭头。因为我使用的是贝塞尔曲线，所以分别使用路径结束点/开始点的中心点更容易。SVG：如何修正Bezier弯曲路径的偏心标记？

在所附的jsfiddle（下文），我们看到点，其中之一为二次贝塞尔曲线的控制点的一个简单的三角形。此外，端点标记已被抵消以与节点接触，而不是部分地位于其后面;这是由于路径被绘制到点的中心而不是边缘。

美学有几件事情不太同意此图右：

箭头头尖比路径
thiner虽然尖端正确角度的箭头上贝塞尔曲线，路径不在箭头出现的位置。

这些美学缺陷的发生是因为：

箭头头部的点是明显thiner比路径/路径通过节点
箭头头部延伸是如此之大在相对于所述路径的曲率，没有令人满意的解决方案，将箭头头部问题（给定当前代码）

现在，人们可以通过制造紧张三次Bezier曲线作为的jsfiddle的第二SVG做陪审团钻机的第二个问题。

然而，在第三SVG看到，这不符合极端曲率擦出火花。

问题

有没有用简单的方式，以确保箭头的点和路径的位置的角度时，箭头连接被居中;或者只是简单地将箭头缩小到足够小而不会注意到的地方？

有没有一种方法，使起始箭头到最后看不见的路径？ /或者一个简单的方法来获得路径在击中节点之前结束？

# code to meet SO requirements 
# look at this code

的jsfiddle

SVG Marker Demo

答

为特定应用程序，尝试将视框的标记，使之小，因此它看起来有点与贝塞尔结束对齐。（SVG标记当前不与曲线对齐。）将refX更改为将箭头向前“滑动”一点直至行尾。例如

<marker id="arrow" viewBox="0 0 25 25" markerWidth="20" markerHeight="10" refX="20" refY="5" orient="auto" markerUnits="strokeWidth">

如何进行视图框的工作。它适用于第一个，但另一个不太好。有没有办法让标记最后呈现（这样我可以将图像分层为路径，节点，标记）？ – SumNeuron

SVG元素总是堆叠/呈现与创建时相同。即如果您想要上方的路径/箭头，则应先创建您的圈子。 –

其中一个主要问题是我正在使用'circle'的中心来制作'path's，然后将'circle'放在''path's之上以掩盖'path's。我这样做是因为在我的应用程序中，我可能不一定知道'path'可能来自哪个方向，所以在'circle'不重要之前就搞清楚如何结束'path'。我可以通过向'refX'属性添加半径来将'marker'移回''path''，但是'path'比tip更宽。有没有办法解决这个问题？ – SumNeuron

答

为什么不只是使标记使用的坐标系，而不是strokeWeight，用于：

<marker id="arrow" markerWidth="40" markerHeight="30" refX="25" refY="-5" 
        orient="auto" markerUnits="userSpaceOnUse" overflow="visible"> 
    <!-- path for the arrow head --> 
    <path d="M-18,10 l 6 -15 l -6 -15 l 40 15 l -40 15 Z" 
     fill="white" 
     stroke='black' 
     stroke-width='3' 
     opacity='1' /> 
</marker>

排序。如果我们绘制的路径后的“点”，从而使箭头头上结果在上面：

我不知道这意味着什么...此外，图像不显示:( – SumNeuron

你可以注意到'markerUnits =“userSpaceOnUse”' - 并且图像加载得很好，除非你使用阻止它的浏览器扩展 –

当然，但这并不能解决我的两个原始问题之一... – SumNeuron

SVG：如何修正Bezier弯曲路径的偏心标记？

上下文

问题

的jsfiddle

相关推荐