Warna latar belakang default dari elemen root SVG

Saya ingin mengatur warna latar belakang default untuk seluruh dokumen SVG, menjadi merah misalnya.

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

Solusi di atas berfungsi tetapi properti latar belakang atribut style sayangnya bukan yang standar: http://www.w3.org/TR/SVG/styling.html#SVGStylingProperties , dan itu dihapus saat proses pembersihan dengan SVG Pembersih.

Apakah ada cara lain untuk mendeklarasikan warna latar belakang ini?

SVG 1.2 Tiny memiliki viewport-fill. Saya tidak yakin seberapa luas penerapan properti ini karena sebagian besar browser menargetkan SVG 1.1 saat ini. Opera mengimplementasikannya FWIW.

Solusi lintas-browser yang lebih saat ini adalah menempel <rect>elemen dengan lebar dan tinggi 100% dan mengisi = "merah" sebagai anak pertama dari <svg>elemen, misalnya:

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

Menemukan ini berfungsi di Safari. SVG hanya warna dengan warna latar di mana kotak pembatas elemen mencakup. Jadi, berikan batas (garis luar) dengan batas nol piksel. Ini mengisi semuanya untuk Anda dengan warna latar belakang Anda.

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

Ini adalah jawaban dari @Robert Longson, sekarang dengan kode (awalnya tidak ada kode, ditambahkan kemudian):

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

Jawaban ini menggunakan:

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

Izinkan saya melaporkan solusi yang sangat sederhana yang saya temukan, yang tidak tertulis dalam jawaban sebelumnya. Saya juga ingin mengatur latar belakang dalam SVG, tetapi saya juga ingin ini berfungsi dalam file SVG mandiri.

Nah, solusi ini sangat sederhana, sebenarnya SVG mendukung tag gaya, sehingga Anda dapat melakukan sesuatu seperti

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

Saat ini saya sedang mengerjakan file seperti ini:

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

Dan saya mencoba memasukkan ini ke style.css:

svg {
  background: #bf1f1f;
}

Ini berfungsi pada Chromium dan Firefox, tapi saya pikir itu bukan praktik yang baik . EyeOfGnome image viewer tidak membuatnya, dan Inkscape menggunakan namespace khusus untuk menyimpan latar belakang seperti itu:

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

Nah, tampaknya elemen root SVG bukan bagian dari elemen yang dapat dilukis dalam rekomendasi SVG.

Jadi saya menyarankan untuk menggunakan solusi "rect" yang disediakan oleh Robert Longson karena saya kira itu bukan "hack" sederhana. Tampaknya menjadi cara standar untuk mengatur latar belakang dengan SVG.

Solusi lain mungkin menggunakan <div>ukuran yang sama untuk membungkus <svg>. Setelah itu, Anda akan dapat mendaftar "background-color", dan "background-image"itu akan memengaruhi svg.

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

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