Свойство стиля «Фон» игнорируется для элементов <svg>внутри других элементов <svg> - PullRequest
Новая
       11

Свойство стиля «Фон» игнорируется для элементов <svg>внутри других элементов <svg>

0 голосов
/ 04 июня 2018

A простой эксперимент с двумя вложенными <svg> элементами показывает:

  • Внешний элемент <svg> имеет примененное свойство стиля background
  • К внутреннему элементу <svg> не применено свойство стиля background

Другой эксперимент добавляет атрибут transform к обоим <svg>s показывает, что этот атрибут также игнорируется внутренним <svg>.

Любая причина, по которой внутренний элемент <svg> игнорирует свойства, такие как background styling и transform?В целом, есть ли документация о том, какие атрибуты применяются и не применяются к вложенным элементам <svg>?

Ответы [ 3 ]

0 голосов
/ 04 июня 2018

Я нашел другой вопрос с той же проблемой и еще один дубликат , который включает эту ссылку на официальную документацию W3C , показывающую, какие атрибуты разрешены длявложенный <svg> компонент.

Таким образом, вложенные <svg> s не могут делать все, что может сделать верхний уровень <svg> s, и если у вас возникли проблемы, обратитесь к документации W3C , чтобы увидетьто, что вы пытаетесь сделать, просто не поддерживается.

0 голосов
/ 04 июня 2018

Проблема в том, что, когда <svg> встроен в HTML, он выполняет двойную функцию как элемент SVG , так и элемент HTML .

Для обеспечения согласованности,некоторые функции HTML работают с внешними элементами <svg>, но они не работают с внутренними / вложенными элементами SVG.Помните, что SVG отличается от стандарта HTML.У него другое назначение, и для всех функций HTML не имеет смысла работать с элементами SVG.Сказав, что там, где это имеет смысл, некоторые функции HTML поддерживаются или будут поддерживаться в ближайшее время.

Одним ранним добавлением было заставить background / background-color работать с крайними <svg> элементами.AFAIK все браузеры поддерживают это сейчас.

То же самое относится и к transform.Текущая спецификация SVG (1.1) не допускает transform для элемента <svg>, но для согласованности с другими элементами HTML браузеры поддерживают ее для самых внешних элементов <svg>.В следующем стандарте SVG 2 transform будет разрешено и для внутренних элементов <svg>.На самом деле Firefox уже реализовал это.Я полагаю, что в настоящее время это единственный браузер, который делает это.

Если вы хотите использовать подход, который работает везде, следующее обычно делает свое дело. 

<svg ...>
  <rect width="100%" height="100%" fill="#00f"/>
  ...
</svg>
0 голосов
/ 04 июня 2018

Вы должны использовать свойство fill css для внутренних svg. Демо 

<svg fill="blue" />
...