☰

Линейный градиент SVG отображается по-разному в разных программах, если атрибут x2 отсутствует

tag-icon • tag-icon browser inkscape svg standards
Линейный градиент SVG отображается по-разному в разных программах, если атрибут x2 отсутствует

Недавно я импортировал и отредактировал файл вИнкскейп. Я сохранил изображение как «оптимизированный SVG» в Inkscape, но когда я открыл полученный файл в разных программах, некоторые из них отобразили его так же, как Inkscape, в то время как другие не применяли определенный линейный градиент (хотя все остальные части изображения, включая градиенты, работали нормально).

Пока что предыстория. Я сжал свое исходное изображение до минимального примера и определил, какая часть исходного SVG-файла заставляет разных зрителей вести себя по-разному. Вот мой пример файла SVG:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" height="982" width="982" version="1.1"
 viewBox="0 0 982 982">
 <defs>
  <linearGradient id="a" gradientUnits="userSpaceOnUse"
   gradientTransform="matrix(-62.075 1070.8 1070.8 62.075 521.8 -42.09)">
   <stop stop-color="#bbb9c2" offset="0"/>
   <stop stop-color="#3f3" offset="1"/>
  </linearGradient>
 </defs>
 <path fill="url(#a)" d="m0 491.11c0 271.12 219.78 490.89 490.85 490.89 271.13 0 490.92-219.77 490.92-490.89 0-271.07-219.79-490.86-490.92-490.86-271.07 0-490.85 219.79-490.85 490.86"/>
</svg>

Вот как это выглядит в Inkscape иПросмотрщик изображений GNOME («Глаз GNOME»): пример изображения SVG в Inkscape или Eye of GNOME

Вот как это выглядит в веб-браузерах Firefox и Chromium: пример изображения SVG в Firefox или Chromium

Однако я заметил, чтоЕсли вы добавите атрибут x2="1"к <linearGradient>элементу, изображение будет выглядеть одинаково во всех этих средствах просмотра..

К сожалению, я недостаточно хорошо знаком с форматом файла SVG и его особенностями.SVG-стандарт, но мне кажется очевидным, чтоодна из этих интерпретаций моего файла должна быть неверной (т.е. нарушает стандарт). Кто-нибудь знает, на чьей стороне правда (т. е. для каких программ мне следует отправлять отчет об ошибке)?

решение1

Хорошо, я пока не совсем уверен, какое из двух представлений верно, но подозреваю, что это то, которое отображается веб-браузерами, поскольку я обнаружил ошибки, влияющие на поведение моего примера как в Inkscape, так и в Eye of GNOME (см. ниже).

яиметьвыяснил причину, по которой я узнал об этой проблеме в первую очередь: файл SVG, который я открыл с помощью Inkscape, имел <linearGradient>с атрибутами gradientUnits="userSpaceOnUse"и x2="1"(как в моем примере). При сохранении как «оптимизированный SVG», Inkscape «оптимизировал» атрибут, x2="1"поскольку он интерпретировал его как эквивалент x2="100%", который является значением по умолчанию для x2атрибутакак указано в стандарте SVGи поэтому может быть опущен.Однако, интерпретация x2="100%"⇔ в Inkscape x2="1"(вероятно) неверна – этоОшибка Inkscape #1153706.

В ходе моего исследования этой проблемы я столкнулся с различными несоответствиями в отношении того, как различное программное обеспечение обрабатывает gradientUnits="userSpaceOnUse"в сочетании с атрибутами вектора градиента x1, x2, y1и y2. Ниже приведены отчеты об ошибках, которые либо уже существовали, либо которые я сам подал в результате своих выводов:

Связанный контент