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

发布于 2024-11-13 05:26:57 字数 1006 浏览 3 评论 0原文

我在页面上使用 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 文件存在问题（目前在线位于 http://jsbin.com/amaqo4/6）：

<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <table>
    <tr style="background: url(YOUR-SVG-FILE.svg)"><td>test</td></tr>
  </table>
  <div style="background: url(YOUR-SVG-FILE.svg)">test</div>
</body>
</html>

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

原文

I am using an SVG image on a page (via the CSS background-image property) and when I view this page in Chrome (version 11.0.696.71 on Windows), one of my CPU cores goes to 100% and stays there permanently. My SVG image is quite simple and is defined in its own XML file:

<?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>

Update:

You may need to use the SVG in a specific way on the page to experience the problem. This HTML file has the issue (currently online at http://jsbin.com/amaqo4/6):

<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <table>
    <tr style="background: url(YOUR-SVG-FILE.svg)"><td>test</td></tr>
  </table>
  <div style="background: url(YOUR-SVG-FILE.svg)">test</div>
</body>
</html>

When I remove either the table or the div, the problem goes away.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

薔薇婲 2024-11-20 05:26:57

这是由 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>

This is caused by the implicit width and height of 100% on the svg element. Explicitly specifying width="100%" height="100%" on the svg element causes the same issue. I've discovered that the problem can be solved by using unit-less dimensions, e.g. width="1" height="1".

Here is a modified version of my SVG file that fixes the problem:

<?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>

回复收藏 0 原文

白首有我共你 2024-11-20 05:26:57

可能有很多原因：

SVG大致相当于Flash（如果你喜欢的话）影片剪辑，每个元素都有大量的事件、特性、属性，可以动画、脚本化、炒制、冷食，以不可预测的方式与HTML内容交互其中包括 Alpha 混合、命中盒测试、路径剪切、嵌入 XML/HTML 内容（可能嵌入 SVG）、从 HTML 内容获取尺寸、事件传播。
你的 chrome 版本有问题。
你的 chrome 版本有问题。
您的图形 api 不会加速此特定 SVG 实现使用的 alpha 合成。
你的图形驱动程序有问题。
你的操作系统有问题。