svg路径渲染速度答案

【问题标题】：svg path rendering speedsvg路径渲染速度
【发布时间】：2013-07-28 11:35:08
【问题描述】：

大约有 6000 个 svg 路径元素。每个都像：

<path fill="none" d="M -1180.753662,3450.687500 C -1183.848267,3258.348389              
-899.981628, 2965.197998 -707.642639,2962.103516" stroke="#8f87a8"/>

我正在使用 d3 平移和缩放事件来平移和缩放整个 svg。 http://bl.ocks.org/mbostock/3680999 似乎 html 页面必须在每次平移或缩放时重新渲染所有这些，这使得操作非常缓慢。

理论上我可以使平移和缩放更平滑吗？

【问题讨论】：

您是否尝试过使用 SVG 剪辑路径仅显示您需要的内容？
@LarsKotthoff 我不确定我知道你的意思。我知道剪辑路径基本但不是专家。如何不渲染超出 svg 画布的元素？
在您对我的问题发表评论之后，我仍然希望看到这个问题。尝试一次添加 100 条路径，看看缩放何时变得难以忍受，并测试此阈值在所有浏览器上是否相同。

标签： svg d3.js html-rendering

【解决方案1】：

使用 CSS3 转换。

Mike Bostock 有一个example of a zoomable map，并使用 CSS3 平移和缩放来实现平滑缩放。这种方法有缺点：如果您的缩放容器有文本，它也会被“放大”。但这对您来说可能无关紧要，或者您可以解决它。

【讨论】：

我已经在使用转换了。现在我认为渲染部分是瓶颈，虽然我不是 100% 肯定的。
我不知道你的 SVG，但也许有办法将它们分组到较低的缩放级别？您的用户真的需要与 6000 个元素中的每一个进行交互吗？