svg - 浏览器渲染时,SVG 中的箭头不会旋转

标签 svg inkscape

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

但是当我通过浏览器渲染它时,箭头被搞砸了:

enter image description here

这(上图)是实际的 svg ( link ),如果它在您的浏览器中正确呈现,这是我的看法(这次是 png 格式的屏幕截图):

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

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

最佳答案

有针对 Chrome、Firefox、Inkscape 和 Wikimedia 的错误报告。事实证明,当只有一个 handle (曲线开头的 handle )的长度为零时,一些渲染器会弄错箭头方向。目前,Firefox、Inkscape 和 LibreOffice Write 是正确的,而 Chrome 则是错误的。

要创建此类线的示例,请在 Inkscape 中绘制一条线,然后添加弯曲的中点。 Inkscape 然后制作两个段贝塞尔曲线,但末端段的长度为零。如果您随后删除中点,Inkscape 将尝试匹配曲线,并将为端点创建非零长度 handle 。

报告为 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

关于svg - 浏览器渲染时,SVG 中的箭头不会旋转,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28298441/

相关文章:

javascript - 删除节点时的 D3 更新总是删除 SVG DOM 中的最后一个条目

javascript - SVG 元素的矩形选择(用于 Raphael)

svg - feImage 与内部来源

python - 在 Inkscape 中显示/隐藏扩展界面的元素

javascript - 矩阵旋转后如何得到正确的x,y位置?

performance - 导入 R 绘图时 Inkscape 太慢

svg - 字母 'e' 在 SVG 路径中意味着什么?

firefox - 动画 SVG 在 Firefox 中不起作用,在 Chrome 中有效

javascript - svgo removeAttrs 如何指定要删除的属性

svg - 为 Inkscape 1.0 导出 `.pdf_tex`