SVG Gradient становится черным, если на HTML-странице есть тег BASE?

Я использую Raphaël JavaScript Library для создания SVG-элементов на HTML-странице и использую CodeIgniter в качестве PHP-фреймворка. В платформе CodeIgniter мне нужно добавить <base> в заголовок документа HTML для использования JS, CSS и изображений, но это вызвало странную проблему в элементе SVG.

Когда я использую <base>, градиенты не работают. Вместо этого объект становится черным. Он ведет себя точно так же с объектами, заполненными изображением.

Ответ 1

Градиенты SVG определены в документе с уникальным атрибутом id, а затем ссылаются на другой элемент как URL-адрес. Обычно URL-адрес - это только фрагмент идентификатора, например:

<defs>
  <linearGradient id="foo" ...>...</linearGradient>
</defs>
<rect fill="url(#foo)" ... />

Если вы введете элемент <base> с атрибутом href, вы измените значение таких URL-адресов в документе. Вместо того, чтобы вычисляться относительно текущего документа, они вычисляются относительно указанного отдельного URI.

Ответ 2

см. также следующий отчет об ошибке: https://bugzilla.mozilla.org/show_bug.cgi?id=652991

По-видимому, понятие ссылки (градиент заполнения или конец маркера, я подозреваю, тоже) по URL-адресу проблематично для приложений в стиле AJAX, которые также используют history.pushState().

Ответ 3

Ваше определение градиента искажается Также иногда возникают проблемы с Opera для определенных применений объектов, заполненных градиентом.

Ответ 4

У меня была аналогичная проблема - градиент отображается в браузере черным в Chrome, но у меня даже нет тега <base>.

Изменение

<stop  offset="1" style="stop-color:#F26722"/>

<stop  offset="1" stop-color="#F26722"/>

похоже, исправить эту проблему.

Еще одна несвязанная ошибка заключалась в том, что Chrome не смог проанализировать элементы transform="translate(...)" on <g>, мне пришлось переместить их в отдельные <path> -s.