Градиент SVG становится черным, когда на странице HTML есть тег BASE?

Question

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

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

Answer 1

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

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

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

Answer 2

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

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

Answer 3

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

Изменение

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

на

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

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

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

Answer 4

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