Я хочу, чтобы изображение SVG (предварительно представленное, но вставленное с тегом js в тег svg, чтобы позволить дальнейшие манипуляции) могло использовать предопределенный шаблон, используя "шаблон" тег. Звучит достаточно просто, не правда ли?не так ли? Что ж, получается, что Chrome (Webkit?) Ведет себя немного иначе, чем любые другие браузеры, и теперь яЯ не уверен, каков будет лучший способ добиться этого.

Мой SVG выглядит так:

 
  ...
 
 

и я хочу пути с классомspecial иметь "шаблон" как заполнить.

Попытка первая: работает в Chrome, а не в FF или Opera

Моей первой попыткой было просто вставить это в мой CSS:

 .special { fill:url("#specialPattern");}

Это на самом деле работает в Chrome, хотя, когда вы думаете об этом, это, вероятно, не должнот. Другие браузеры, которые я пробовал, интерпретируют этот URL относительно файла, который он 's in (файл css),что имеет больше смысла.

Попытка вторая: работает в FF и Opera, а не в Chrome

Следующая попытка: предоставить абсолютный URL для шаблона.

 .special { fill:url("//example.com/styles/svgWithStyleDeclaration.svg#specialPattern");}

Хотя это работает, как и ожидалось, в FF и Opera, Chrome теперь сбрасывает заливку (я понятия не имею, где он на самом деле ищет этот стиль)

Попытка три: работает, вид

Подчеркивание стиля в SVG работает везде, где кажется:style="fill:url('#specialPattern')"

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

Попытка четвертая: работает (?) Но грязно

У меня нетя протестировал множество браузеров, поэтому яЯ не уверен, насколько это доказательство воды, но мне кажется, что использование CSS-хака для обнаружения браузеров WebKit будет работать:

@media screen and (-webkit-min-device-pixel-ratio:0) {
  .special {fill: url("#specialPattern");}
}
 .special { fill:url("//example.com/styles/svgWithStyleDeclaration.svg#specialPattern");}

Теперь должен быть более элегантный способ решить эту проблему. Как это должно быть сделано?

Изменить: Оказывается, что IE ведет себя как Chrome здесь, поэтому вам также нужно убедиться, что IE <= 9 имеет 'fill: url (#specialPattern) '