Цвет фона корневого элемента SVG по умолчанию

Я хотел бы установить цвет фона по умолчанию для всего документа SVG, например красный.

<svg viewBox="0 0 500 600" style="background: red">/* content */</svg>

Приведенное выше решение работает, но свойство background атрибута style, к сожалению, не является стандартным: http://www.w3.org/TR/SVG/styling.html#SVGStylingProperties , и поэтому оно удаляется во время процесса очистки с помощью SVG. Очиститель.

Есть ли другой способ объявить этот цвет фона?

SVG 1.2 Tiny имеет заполнение области просмотра, но я не уверен, насколько широко реализовано это свойство, поскольку в настоящее время большинство браузеров ориентированы на SVG 1.1. Opera реализует это FWIW.

В настоящее время более кроссбраузерным решением было бы прикрепить <rect>элемент с шириной и высотой 100% и fill = "red" в качестве первого дочернего <svg>элемента элемента, например:

<rect width="100%" height="100%" fill="red"/>

Нашел это работает в Safari. SVG окрашивается только в фоновый цвет там, где закрывается ограничивающая рамка элемента. Итак, дайте ему границу (обводку) с нулевой границей пикселей. Он заполняет все для вас вашим цветом фона.

<svg style='stroke-width: 0px; background-color: blue;'> </svg>

Это ответ @Robert Longson, теперь с кодом (изначально кода не было, он был добавлен позже):

<?xml version="1.0" encoding="UTF-8"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
 <rect width="100%" height="100%" fill="red"/>
</svg>

В этом ответе используются:

• https://stackoverflow.com/a/11293812/6747994
• https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Fills_and_Strokes

Позвольте мне сообщить об очень простом решении, которое я нашел, о котором не было написано в предыдущих ответах. Я также хотел установить фон в SVG, но я также хочу, чтобы это работало в отдельном файле SVG.

Что ж, это решение действительно простое, на самом деле SVG поддерживает теги стилей, поэтому вы можете сделать что-то вроде

<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50">
  <style>svg { background-color: red; }</style>
  <text>hello</text>
</svg>

Сейчас я работаю над таким файлом:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<?xml-stylesheet type="text/css" href="style.css" ?>
<svg
  xmlns="http://www.w3.org/2000/svg"
  version="1.1"
  width="100%"
  height="100%"
  viewBox="0 0 600 600">
...

И я попытался поместить это в style.css :

svg {
  background: #bf1f1f;
}

Он работает с Chromium и Firefox, но я не думаю, что это хорошая практика . Программа просмотра изображений EyeOfGnome не отображает их, а Inkscape использует специальное пространство имен для хранения такого фона:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
    xmlns="http://www.w3.org/2000/svg"
    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
    version="1.1"
    ...
  <sodipodi:namedview
     pagecolor="#480000" ... >

Что ж, похоже, что корневой элемент SVG не является частью окрашиваемых элементов в рекомендациях по SVG.

Поэтому я предлагаю использовать «прямое» решение, предложенное Робертом Лонгсоном, потому что я предполагаю, что это не простой «взлом». Кажется, это стандартный способ установить фон с помощью SVG.

Другой обходной путь может заключаться в использовании <div>того же размера для упаковки <svg>. После этого вы сможете подать заявку "background-color", и "background-image"это повлияет на svg.

<div class="background">
  <svg></svg>
</div>

<style type="text/css">
.background{
  background-color: black; 
  /*background-image: */
}
</style>