Chrome 中的 SVG 动态渲染答案

【问题标题】：SVG dynamic rendering in ChromeChrome 中的 SVG 动态渲染
【发布时间】：2011-02-10 00:53:36
【问题描述】：

我正在尝试使用 JavaScript 库添加和创建 SVG 元素，并且遇到了一个我想解决的常见主题。

例如，我正在发出 AJAX 请求并根据返回的纬度和经度值在地图上生成一个点（使用 Polymaps，尽管 Protovis 也发生了这种情况）。当我运行一次时，它工作正常。例如，这是从服务器返回的内容

[{'lat':29.6196787,'lng':-95.6349463},{'lat':42.3584308,'lng':-71.0597732}]

然后我将它分配给一个变量并让库处理渲染。

当我加入一个交互功能时，我提出更多请求并添加更多点，除非我调整窗口大小或在页面周围单击，否则 Chrome 中不会显示任何内容（就像点在那里但它必须刷新？）在 Firefox 中一切似乎都很好。

我认为这可能与全局变量和局部变量范围有关，但我似乎不明白为什么。有人曾经提到使用匿名自调用函数，但我通常感到困惑。我能得到一些帮助吗？

干杯！

【问题讨论】：

您能否在任何地方在线提供您的问题的简化示例，以便我们重现您的结果？
SVG 是可缩放的，Chrome 和 firefox 以不同的方式渲染小于像素大小的元素，有时缩放会导致点不显示，或者在地图边框不显示的情况下。 stackoverflow.com/questions/3998254/svg-image-zoom-and-borders/…你的代码没有显示，所以我想问一下你可能认为什么是转储问题；如果您在代码中放置一个非常大的矩形，它会显示出来吗？
是的。最初一切都正确渲染。当我尝试重复该过程时，我发现它在 Chrome 中无法正确执行，但它在 Firefox 中有效。
你有没有想过这个问题？我有同样的问题，我根据 AJAX 数据动态更改 SVG 路径。由多个动态路径组成的图表上的线条在加载数据后不会显示在 Chrome 中，除非我在浏览器中放大或缩小，这会以某种方式导致 Chrome 重新呈现 SVG 内容。 SVG 在 Firefox 和 IE 中都能完美运行（使用 Abode 插件）。我目前正在寻找某种方法来强制 Chrome 在新数据到达时重新绘制 SVG。
我找到了我遇到的重新渲染问题的原因。 Chrome SVG 支持中存在一个错误，它使过滤器覆盖的动态渲染对象不会改变。这是错误提交的链接。 code.google.com/p/chromium/issues/detail?id=68971

【解决方案1】：

看看这个，也许它会有所帮助，图层对象上有一个重新加载功能。

【讨论】：