SVG 루트 요소의 기본 배경색

SVG 루트 요소의 기본 배경색

---

전체 SVG 문서의 기본 배경색을 예를 들어 빨간색으로 설정하고 싶습니다.

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

위의 솔루션은 작동하지만 스타일 속성의 배경 속성은 불행히도 표준이 아닙니다 : http://www.w3.org/TR/SVG/styling.html#SVGStylingProperties 이므로 SVG로 청소하는 동안 제거됩니다. 청소기.

이 배경색을 선언하는 다른 방법이 있습니까?

---

SVG 1.2 Tiny의 뷰포트 채우기 현재 대부분의 브라우저가 SVG 1.1을 대상으로하고 있지만이 속성이 얼마나 광범위하게 구현되어 있는지 잘 모르겠습니다. 오페라는 그것을 FWIW로 구현합니다.

더 많은 브라우저 간 솔루션은 현재 <rect>너비와 높이가 100 %이고 <svg>요소 의 첫 번째 자식으로 fill = "red"인 요소를 고정하는 것입니다.

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

---

이것은 Safari에서 작동합니다. SVG는 요소의 경계 상자가 포함되는 배경색으로 만 색상을 지정합니다. 따라서 픽셀 경계가 0 인 경계선 (획)을 지정하십시오. 배경색으로 당신을 위해 모든 것을 채 웁니다.

<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;
}

Chromium 및 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 명령에서 페인트 가능한 요소의 일부가 아닌 것 같습니다 .

So I'd suggest to use the "rect" solution provided by Robert Longson because I guess that it is not a simple "hack". It seems to be the standard way to set a background with SVG.

---

Another workaround might be to use <div> of the same size to wrap the <svg>. After that, you will be able to apply "background-color", and "background-image" that will affect thesvg.

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

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

참고URL : https://stackoverflow.com/questions/11293026/default-background-color-of-svg-root-element