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

Question

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> 

Các giải pháp trên công trình nhưng sở hữu nền của thuộc tính style là tiếc là không một tiêu chuẩn một: http://www.w3.org/TR/SVG/styling.html#SVGStylingProperties, và vì vậy nó được loại bỏ trong quá trình làm sạch với SVG Cleaner.

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

Answer 1

SVG 1.2 Tiny có viewport-fill Tôi không chắc chắn việc triển khai rộng rãi thuộc tính này như thế nào khi 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 hơn qua trình duyệt hiện nay sẽ được dính vào một yếu tố <rect> với chiều rộng và chiều cao của 100% và điền = "red" là đứa con đầu lòng của <svg> yếu tố

Answer 2

workaround khác có thể được sử dụng <div> có cùng kích thước để bọc <svg>. Sau đó, bạn sẽ có thể áp dụng "background-color" và "background-image" sẽ ảnh hưởng đến svg.

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

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

Answer 3

Tìm thấy tính năng này hoạt động trong Safari. Chỉ có màu SVG với màu nền, trong đó hộp giới hạn của phần tử bao trùm. Vì vậy, cung cấp cho nó một biên giới (đột quỵ) với một ranh giới điểm ảnh bằng không. Nó lấp đầy trong toàn bộ điều cho bạn với màu nền của bạn.

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

Answer 4

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 điều này vào style.css:

svg { 
    background: #bf1f1f; 
} 

Nó làm việc trên Chromium và Firefox, nhưng Tôi không nghĩ rằng đó là một thực hành tốt. EyeOfGnome xem ảnh không làm cho nó, và Inkscape sử dụng một không gian tên đặc biệt để lưu trữ một nền tảng như:

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

Vâng, có vẻ như phần tử gốc SVG không phải là một phần của paintable elements trong recommandations SVG.

Vì vậy, tôi khuyên bạn nên sử dụng "rect" solution provided by Robert Longson vì tôi đoán rằng đó không phải là "hack đơn giản". Nó có vẻ là cách tiêu chuẩn để đặt nền bằng SVG.

Answer 5

Đó là câu trả lời của @Robert longson, bây giờ với mã:

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