大型 SVG 无法渲染……我的错？浏览器？答案

【问题标题】：Large SVGs not rendering...my fault? browsers?大型 SVG 无法渲染……我的错？浏览器？
【发布时间】：2014-10-02 17:19:28
【问题描述】：

我有一个使用代码动态创建的大型 SVG。它创建的路径的一个示例是；

<path id="curveAB" d="M 8307,437 S 8307,447 8451,406 8595,365 8595,375 " stroke="blue" stroke-width="3" fill="none"></path>

这曾经是可行的，但我最近注意到（没有代码更改）它停止显示在浏览器中。

他们在 Chrome 29 和 36 之间停止工作，但不确定何时。

它是用于在框之间绘制箭头的系统的一部分。

你需要勾选“examples/exampleIndex.ntlist”，点击“Load Index”。然后当它加载类型时，例如“水果”并按回车键。您应该会看到很多框 - 如果它正在工作，它们之间会出现显示属性语义继承的线条。

如果您使用 chrome 检查器您可以看到保留每个 SVG 路径应占用的空间的框。好像路径不可见，但正在计算中。

我注意到它也不再适用于 Firefox。去年 SVG 标准是否发生了某种变化？现在对 SVG 有大小限制吗？

这影响了我的一些项目，而且很难用谷歌搜索任何看起来相关的东西。我看到的唯一另一种可能性是我错误地格式化了 SVG，并且巧合的是，它曾经在 Chrome 29 上正常工作（现在仍然如此），但从那时起 Chrome 收紧了它的 SVG 传递程序，我的错误不再滑倒在？

任何帮助将不胜感激。

【问题讨论】：

【解决方案1】：

您的<svg> 没有宽度或高度属性。也没有通过 CSS 指定宽度或高度。在这种情况下，它默认为 300x150。因此，对于您的页面，它隐藏在左上角。如果您指定宽度和高度，它应该可以正确显示。

<svg width="100%" height="100%">

Chrome 最近更改（即修复）其行为。这就是它停止为您工作的原因。

【讨论】：