SVG中的箭头在浏览器呈现时不会旋转

Question

我创建了一个SVG文件，在inkscape中它看起来像这样：

但是当我通过浏览器渲染它时，箭头会被搞砸：

这个（上面）是实际的svg（link），如果它在你的浏览器中正确呈现，我就是这样看的（这次它是png中的截图）：

在最新的Firefox和Chrome中也是如此。

此文件是在Windows上的inkscape 0.48中创建的，当我在inkscape中重新打开它时，它会正确呈现。有没有办法让浏览器旋转箭头？

Answer 1

Chrome，Firefox，Inkscape和Wikimedia都有针对此的错误报告。事实证明，当只有一个手柄（曲线开头处的手柄）长度为零时，某些渲染器会使箭头方向错误。目前，Firefox，Inkscape和LibreOffice Write都是正确的，而Chrome则说错了。

要创建此类线的示例，请在Inkscape中绘制一条线，然后添加一个弯曲的中点。然后，Inkscape会生成两段Bezier曲线，但末端段的长度为零。如果然后删除中点，Inkscape将尝试匹配曲线，并为端点创建非零长度句柄。

报告为bug in Firefox in 2015, and fixed

报告为bug in Chrome in 2015, and not fixed

报告为bug in Inkscape in 2006, blamed on user and closed as "out of date" in 2009

报告为bug in Wikimedia in 2015, by me

Discussion of ambiguity in SVG spec

Answer 2

我在Inkscape中注意到的一个修复是首先选择＆＃34;按节点编辑路径＆＃34;选项，并选择每个端点并选择选项以使所选节点平滑＆＃34;从路径编辑工具栏。

Answer 3

我找到了解决方案：

问题在于，对于这些线使用贝塞尔曲线，即使线条笔直，也会导致问题。一旦我用＆＃34;图表连接器＆＃34;替换曲线，问题就消失了。

Answer 4

您正在使用退化贝塞尔曲线，该曲线显示为直线。在确定标记角度时，版本38之前的Chrome和Firefox都不能应对这些问题。

这已在Firefox 38中由bug 1129854修复。我认为这也是一个等同的Chrome漏洞。