SVG 中的箭头在浏览器呈现时不会旋转
Arrows in SVG aren't rotated when rendered by browsers
我创建了一个 SVG 文件，在 inkscape 中它看起来像这样：
但是当我用浏览器渲染它时，箭头搞砸了:
这（上图）是实际的 svg (link)，如果它在您的浏览器中正确呈现，我是这样看的（这次是 png 格式的屏幕截图）：
在最新的 Firefox 和 Chrome 中是一样的。
此文件是在 Windows 上的 inkscape 0.48 中创建的，当我在 inkscape 中重新打开它时，它可以正确呈现。有没有办法让浏览器旋转箭头？
我找到了解决方案：
问题是这些线使用了贝塞尔曲线，即使线是直的，也会导致问题。一旦我用 "diagram connectors" 替换了曲线，问题就消失了。
您正在使用显示为直线的退化贝塞尔曲线。 Chrome 和版本 38 之前的 Firefox 在确定标记角度时都不会处理这些问题。
此问题已由 bug 1129854 在 Firefox 38 中修复。我认为也有一个等效的 Chrome 错误。
Chrome、Firefox、Inkscape 和 Wikimedia 有关于此的错误报告。事实证明，当只有一个手柄（曲线开头的手柄）的长度为零时，某些渲染器会弄错箭头方向。目前，Firefox、Inkscape 和 LibreOffice Write 是正确的，而 Chrome 是错误的。
要创建这样一条线的示例，请在 Inkscape 中绘制一条线，然后添加一个弯曲的中点。 Inkscape 然后使两个段都成为贝塞尔曲线，但末端段的句柄长度为零。如果随后删除中点，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
我在 Inkscape 中注意到的一个修复是首先 select "edit paths by nodes" 选项，select 每个端点和 select "make the selected nodes smooth" 的选项] 从路径编辑工具栏。
我创建了一个 SVG 文件，在 inkscape 中它看起来像这样：
但是当我用浏览器渲染它时，箭头搞砸了:
这（上图）是实际的 svg (link)，如果它在您的浏览器中正确呈现，我是这样看的（这次是 png 格式的屏幕截图）：
在最新的 Firefox 和 Chrome 中是一样的。
此文件是在 Windows 上的 inkscape 0.48 中创建的，当我在 inkscape 中重新打开它时，它可以正确呈现。有没有办法让浏览器旋转箭头？
我找到了解决方案：
问题是这些线使用了贝塞尔曲线，即使线是直的，也会导致问题。一旦我用 "diagram connectors" 替换了曲线，问题就消失了。
您正在使用显示为直线的退化贝塞尔曲线。 Chrome 和版本 38 之前的 Firefox 在确定标记角度时都不会处理这些问题。
此问题已由 bug 1129854 在 Firefox 38 中修复。我认为也有一个等效的 Chrome 错误。
Chrome、Firefox、Inkscape 和 Wikimedia 有关于此的错误报告。事实证明，当只有一个手柄（曲线开头的手柄）的长度为零时，某些渲染器会弄错箭头方向。目前，Firefox、Inkscape 和 LibreOffice Write 是正确的，而 Chrome 是错误的。
要创建这样一条线的示例，请在 Inkscape 中绘制一条线，然后添加一个弯曲的中点。 Inkscape 然后使两个段都成为贝塞尔曲线，但末端段的句柄长度为零。如果随后删除中点，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
我在 Inkscape 中注意到的一个修复是首先 select "edit paths by nodes" 选项，select 每个端点和 select "make the selected nodes smooth" 的选项] 从路径编辑工具栏。