SVG kök öğesinin varsayılan arka plan rengi

Örneğin, tüm SVG belgesi için varsayılan bir arka plan rengini kırmızı olarak ayarlamak istiyorum.

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

Yukarıdaki çözüm işe yarıyor ancak stil özniteliğinin arka plan özelliği maalesef standart bir özellik değil: http://www.w3.org/TR/SVG/styling.html#SVGStylingProperties ve bu nedenle, SVG ile temizleme işlemi sırasında kaldırılır Temizleyici.

Bu arka plan rengini belirtmenin başka bir yolu var mı?

SVG 1.2 Tiny görüntü alanı dolgusuna sahiptir . Çoğu tarayıcı şu anda SVG 1.1'i hedeflediğinden, bu özelliğin ne kadar geniş bir şekilde uygulandığından emin değilim. Opera bunu FWIW uygular.

Şu anda tarayıcılar arası daha iyi bir çözüm <rect>, genişliği ve yüksekliği% 100 olan bir <svg>öğeyi öğenin ilk alt öğesi olarak doldurmak = "kırmızı" olarak yapıştırmak olacaktır , örneğin:

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

Bu çalışmayı Safari'de buldum. SVG, yalnızca bir öğenin sınırlayıcı kutusunun kapladığı yerde arka plan rengiyle renklendirir. Öyleyse, sıfır piksel sınırına sahip bir sınır (kontur) verin. Arka plan renginizle sizin için her şeyi doldurur.

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

@Robert Longson'ın cevabı, şimdi kodla (başlangıçta kod yoktu, daha sonra eklendi):

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

Bu cevap şunları kullanır:

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

Bulduğum, önceki cevaplarda yazılmayan çok basit bir çözümü rapor edeyim. Ayrıca bir SVG'de arka plan ayarlamak istedim, ancak bunun bağımsız bir SVG dosyasında da çalışmasını istiyorum.

Bu çözüm gerçekten çok basit, aslında SVG stil etiketlerini destekliyor, böylece

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

Şu anda bunun gibi bir dosya üzerinde çalışıyorum:

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

Ve bunu içine koymaya çalıştım style.css:

svg {
  background: #bf1f1f;
}

Bu oluyor çalışan Krom ve Firefox'ta ama bunun iyi bir uygulama olduğunu düşünmüyorum . EyeOfGnome resim görüntüleyici onu oluşturmaz ve Inkscape böyle bir arka planı saklamak için özel bir ad alanı kullanır:

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

Görünüşe göre SVG kök öğesi, SVG önerilerindeki boyanabilir öğelerin bir parçası değil .

Bu nedenle , Robert Longson tarafından sağlanan "rect" çözümünü kullanmanızı öneririm çünkü sanırım bu basit bir "hack" değil. SVG ile bir arka plan oluşturmanın standart yolu gibi görünüyor .

Başka bir geçici çözüm kullanmak olabilir <div>sarmak için aynı büyüklükte <svg>. Bundan sonra, başvuruda bulunabileceksiniz "background-color"ve "background-image"bu svg.

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

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