Почему изображения SVG на странице заставляют Chrome использовать 100% ЦП? - PullRequest
Новая
       4

Почему изображения SVG на странице заставляют Chrome использовать 100% ЦП?

5 голосов
/ 04 июня 2011

Я использую изображение SVG на странице (через свойство background-image CSS), и когда я просматриваю эту страницу в Chrome (версия 11.0.696.71 для Windows), одно из моих ядер ЦП переходит на 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, проблема исчезает.

Ответы [ 2 ]

6 голосов
/ 04 июня 2011

Это вызвано неявной шириной и высотой 100% для элемента svg .Явное указание width="100%" height="100%" в элементе svg вызывает ту же проблему.Я обнаружил, что проблему можно решить с помощью измерений без единиц измерения, например 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>
0 голосов
/ 04 июня 2011

Причин может быть много:

  • SVG примерно эквивалентен мувиклипам Flash (если это ваша вещь), каждый элемент имеет свои многочисленные события, свойства, атрибуты, которые можно анимировать, создавать сценарии,sauted, hot, взаимодействуют с контентом HTML непредсказуемыми способами, включая альфа-смешивание, тестирование по методу «хит», отсечение путей, встроенный контент XML / HTML, который может включать SVG, получение измерений из контента HTML, распространение событий.сборка Chrome содержит ошибки.
  • Ваша версия Chrome содержит ошибки.
  • Ваш графический интерфейс API не ускоряет альфа-компоновку, которую использует данная конкретная реализация SVG.
  • Ваш графический драйверглючит.
  • Ваша ОС глючит.
...