Google chrome 为什么页面上的SVG图像会导致Chrome使用100%的CPU？

我在页面上使用SVG图像（通过CSS背景图像属性），当我在Chrome（Windows上的版本11.0.696.71）中查看此页面时，我的一个CPU内核将100%运行并永久保持不变。我的SVG图像非常简单，并在其自己的XML文件中定义：

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
    <rect width="100%" height="100%" style="fill:rgb(0,0,0);fill-opacity:.05"/>
</svg>

更新：

您可能需要在页面上以特定的方式使用SVG来体验问题。此HTML文件存在问题（当前联机地址为）：

测试
测试

---

当我删除表或div时，问题就消失了。

这是由svg元素上100%的隐式宽度和高度造成的。在svg元素上显式指定

width=“100%”height=“100%”

会导致相同的问题。我发现这个问题可以通过使用无单位尺寸来解决，例如

width=“1”height=“1”

下面是我的SVG文件的一个修改版本，它解决了这个问题：

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="1" height="1" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <rect width="100%" height="100%" style="fill:rgb(0,0,0);fill-opacity:.05"/>
</svg>

---

原因可能有很多：

• SVG大致相当于Flash（如果你喜欢的话）movieclips，每个元素都有大量的事件、属性和属性，可以设置动画、编写脚本、炒制、冷藏，以不可预知的方式与HTML内容交互，包括alpha混合、点击框测试、路径剪辑、嵌入XML/HTML内容（可能嵌入SVG），从HTML内容获取维度，事件传播
• 你的chrome版本有问题
• 你的chrome版本有问题
• 图形api不会加速此特定SVG实现使用的alpha合成
• 你的图形驱动程序有问题
• 你的操作系统有缺陷

---

什么版本的Chrome？什么操作系统？在OSX上的Chrome11中没有这样的问题。请检查（在Windows上的Chrome11中）。看起来SVG可能需要在页面上作为背景图像至少使用两次，表行至少使用一次。很奇怪，很有趣。这使我的一个核心保持在10%左右。

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="1" height="1" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <rect width="100%" height="100%" style="fill:rgb(0,0,0);fill-opacity:.05"/>
</svg>