สีพื้นหลังเริ่มต้นขององค์ประกอบราก 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% และเติม = "red" เป็นลูกแรกของ<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;
}

มันทำงานบนโครเมี่ยมและ 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" ที่ Robert Longson จัดเตรียมไว้ให้เพราะฉันเดาว่ามันไม่ใช่ "แฮ็ก" ง่ายๆ ดูเหมือนว่าจะเป็นวิธีมาตรฐานในการตั้งค่าพื้นหลังด้วย 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>