SVG как URI данных не отображается

Вероятно, это просто синтаксическая ошибка, но я не могу найти подробных ссылок на такое использование. Chrome переоценивает мое фоновое свойство, поэтому я явно что-то обидел.

http://jsfiddle.net/YbA39/2/

Я хочу, чтобы то, что находится в красном поле (фон svg css), отображалось так же, как встроенное svg в html. Просто, верно?

Не говорите, что это невозможно! Меня вдохновляет следующее: http://jsfiddle.net/estelle/SJjJb/


svg css data-uri
person Ben    schedule 13.07.2012    source источник

Ответы (2)


arrow_upward
7
arrow_downward

Вы не экранировали символы '#' в синтаксисе url(). И это «viewBox», а не «viewbox».

Вот что работает: http://jsfiddle.net/YbA39/3/ (просто быстрая строка с URL-адресом).

person Erik Dahlström    schedule 13.07.2012
comment
Ну да, это работает. Но на самом деле это не объясняет, почему мой пример не работает. Chrome20, Firefox13 и Opera12 поддерживают незакодированный SVG в качестве URI данных. (Только IE9 требует кодировки base64 или URI, строго придерживаясь спецификации). Для доказательства взгляните на вторую скрипку estelle. Он не экранирует свои символы «#», а также не кодируется URI и работает нормально. Почему? В чем разница между моим и Эстель? Заглавная буква b в окне просмотра (хороший улов!) не исправляет это... - person Ben; 13.07.2012
comment
Верно. Упс, я думал, что проверил это! Я буду придерживаться кодировки URI. Просто из любопытства: есть ли планы по поддержке незакодированного data-URI в Opera, а-ля Chrome? Насколько я могу судить, спецификация data-URI не менялась с 1998 года. Будет ли она когда-нибудь расширена? - person Ben; 16.07.2012
comment
Спасибо за "кодировку". Я использовал meyerweb.com/eric/tools/dencoder для кодирования всего ‹svg . .. /›, так что теперь он работает хорошо, кроме IE (даже v.11) - person Ciprian Tepes; 06.04.2016

arrow_upward
1
arrow_downward

Новые строки в объявлении нарушали его. Удаление всех новых строк исправляет это во всех, кроме IE, для которых требуется кодировка base64 или URI:

http://jsfiddle.net/YbA39/4/

person Ben    schedule 13.07.2012