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

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

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

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

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

Ответы

Ответ 1

SVG 1.2 Tiny имеет viewport-fill Я не уверен, насколько широко реализовано это свойство, так как большинство браузеров в настоящее время ориентируются на SVG 1.1. Опера реализует это FWIW.

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

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

Ответ 2

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

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

Ответ 3

Это ответ @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>

Ответ 4

Позвольте мне сообщить об очень простом решении, которое я нашел, которое не написано в предыдущих ответах. Я также хотел установить фон в 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>

Ответ 5

В настоящее время я работаю над таким файлом:

<?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.

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

Ответ 6

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

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

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