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

따라서 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>