Warna latar belakang default dari elemen root SVG


134

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?


1
Apakah mungkin ada bug di SVG Cleaner? Ini menghapus blok gaya inline juga, meskipun mereka standar: w3.org/TR/SVG/styling.html#StylingWithCSS
Volker E.

Jawaban:


120

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"/>

24
Semacam hack hack berfungsi, tetapi mengasumsikan bahwa rasio aspek svg selalu cocok dengan viewport yang didapat, sehingga tidak akan memenuhi seluruh viewport dalam semua situasi.
Erik Dahlström

1
ketika rasio aspek tidak cocok dengan viewport maka menggunakan width="10000%" height="10000%"dapat memperbaikinya. jika tidak maka tambahkan beberapa nol
mulllhausen

1
@mulllhausen sayangnya menambahkan nilai setinggi 10000000% tidak berfungsi. ada saran lain?
Crashalot

viewport-fillPermintaan tarik caniuse yang diabaikan : github.com/Fyrd/caniuse/issues/2186 Mengapa mengapa mereka membiarkan SVG mati.
Ciro Santilli 郝海东 冠状 病 六四 事件 法轮功

47

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>


5
Ini menyebabkan semua goresan sub-elemen menjadi nol-lebar juga, jadi ini bukan opsi "latar belakang" yang bagus.
duanev


20

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>

Solusi yang bagus dan sederhana!
conceptdeluxe

1
Meskipun ini bekerja secara umum di semua browser, pengaturan background-colordari <svg>elemen akan membuat IE11 membuat warna latar belakang juga di luar area yang ditetapkan dengan viewBoxatribut. Ini tidak masalah saat menggunakan widthdan heightatribut.
conceptdeluxe

@conceptdeluxe pengamatan menarik, secara teori gaya kode di dalam svg hanya berlaku di dalam svg. Namun, mengatur lebar dan tinggi hampir selalu diperlukan.
Gianluca Casati

Apakah ada perbedaan antara <svg style"...."></svg>dan <svg><style>...</style></svg>, dengan asumsi <style>tag berada di tingkat atas? Jika tidak, maka jawaban ini sepertinya solusi asli OP, dikemas ulang di bawah sintaks yang berbeda. (Tapi mungkin solusi ini selamat dari SVG Cleaner, sementara <svg style="..."></svg>tidak?)
Labrador

@Labrador Saya mencari solusi, melihat pertanyaan ini, lalu menemukan cara untuk menyelesaikannya dan membagikannya. Saya tidak tahu, sepertinya hanya atribut yang dilaporkan dalam w3.org/TR/SVG/styling.html#SVGStylingProperties ini yang didukung. Di sisi lain solusi yang saya usulkan berfungsi dan saya menyukainya juga karena Anda dapat menata tag SVG lainnya, seperti path, rect, dll. Fitur utama bagi saya adalah ia berfungsi juga untuk SVG mandiri.
Gianluca Casati

10

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.


4
<rect width = "100%" height = "100%" fill = "white" /> di awal menyelesaikan masalah untuk eog
nvrandow

2

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>

12
Solusi ini adalah hack HTML. Dan dapat bekerja hanya jika Anda menggunakan SVG ke halaman web. Ini bukan solusi SVG sejati.
Charles-Édouard Coste

Warna latar belakang SVG dipinjam dari komponen tempat duduknya (seperti svg meminjam warna halaman, dan warna halaman default adalah putih). Entah bagaimana saya tidak berpikir itu adalah hack.
Clinux

@clinux: Apa yang ingin dikatakan oleh Charles adalah, ini berfungsi dengan baik untuk rendering halaman web tetapi anggap Anda ingin menggunakan svg yang sama dengan gambar dengan ekstensi .svg untuk merendernya di tempat lain, ini mungkin tidak berfungsi.
Arunkumar Srisailapathi
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.