Колір тла за замовчуванням кореневого елемента SVG

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

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

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

Чи є інший спосіб оголосити цей колір тла?

SVG 1.2 Tiny має заповнення огляду. Я не впевнений, наскільки широко реалізована ця властивість, хоча в даний час більшість браузерів орієнтуються на SVG 1.1. Opera реалізує його FWIW.

Більш кросовим рішенням браузера в даний час буде приклеїти <rect>елемент шириною і висотою 100% і заповнити = "червоний" як перший дочірній <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.

Тому я б запропонував використати рішення "rect", яке надав Роберт Лонгсон, тому що я думаю, що це не простий "хак". Здається, це стандартний спосіб встановити фон із 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>