Màu nền mặc định của phần tử gốc SVG

Tôi muốn đặt màu nền mặc định cho toàn bộ tài liệu SVG, thành màu đỏ chẳng hạn.

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

Giải pháp ở trên hoạt động nhưng thuộc tính nền của thuộc tính style không may không phải là tiêu chuẩn: http://www.w3.org/TR/SVG/stomme.html#SVGStylingProperies , và do đó, nó bị xóa trong quá trình làm sạch với SVG Sạch hơn.

Có cách nào khác để khai báo màu nền này không?

SVG 1.2 Tiny có chế độ xem đầy đủ Tôi không chắc chắn cách thức triển khai rộng rãi của tài sản này mặc dù hầu hết các trình duyệt đang nhắm mục tiêu SVG 1.1 tại thời điểm này. Opera thực hiện nó FWIW.

Một giải pháp đa trình duyệt hiện tại sẽ là dán một <rect>phần tử có chiều rộng và chiều cao 100% và fill = "red" làm <svg>phần tử con đầu tiên của phần tử, ví dụ:

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

Tìm thấy điều này hoạt động trong Safari. SVG chỉ tô màu với màu nền trong đó hộp giới hạn của phần tử bao phủ. Vì vậy, cung cấp cho nó một đường viền (đột quỵ) với ranh giới pixel bằng không. Nó lấp đầy toàn bộ cho bạn với màu nền của bạn.

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

Đó là câu trả lời của @Robert Longson, bây giờ có mã (ban đầu không có mã, nó đã được thêm vào sau):

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

Câu trả lời này sử dụng:

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

Hãy để tôi báo cáo một giải pháp rất đơn giản mà tôi tìm thấy, đó không phải là viết trong các câu trả lời trước. Tôi cũng muốn đặt nền trong một SVG, nhưng tôi cũng muốn nó hoạt động trong một tệp SVG độc lập.

Chà, giải pháp này thực sự đơn giản, trên thực tế, SVG hỗ trợ các thẻ kiểu, vì vậy bạn có thể làm một cái gì đó như

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

Tôi hiện đang làm việc trên một tập tin như thế này:

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

Và tôi đã cố gắng đưa nó vào style.css:

svg {
  background: #bf1f1f;
}

Nó hoạt động trên Chromium và Firefox, nhưng tôi không nghĩ rằng đó là một cách thực hành tốt . Trình xem ảnh EyeOfGnome không hiển thị nó và Inkscape sử dụng một không gian tên đặc biệt để lưu trữ nền như vậy:

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

Chà, có vẻ như phần tử gốc SVG không phải là một phần của các phần tử có thể vẽ được trong các khuyến nghị của SVG.

Vì vậy, tôi khuyên bạn nên sử dụng giải pháp "chỉnh lưu" do Robert Longson cung cấp vì tôi đoán rằng đó không phải là một "hack" đơn giản. Nó dường như là cách tiêu chuẩn để đặt nền với SVG.

Một cách giải quyết khác có thể là sử dụng <div>cùng kích thước để bọc <svg>. Sau đó, bạn sẽ có thể áp dụng "background-color", và "background-image"điều đó sẽ ảnh hưởng đến svg.

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

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