임베디드 SVG에 스타일을 적용하는 방법은 무엇입니까?

107

<svg>태그를 사용하여 SVG가 문서에 직접 포함되는 경우 문서의 스타일 시트를 통해 SVG에 CSS 스타일을 적용 할 수 있습니다. 그러나 <object>태그를 사용하여 포함 된 SVG에 스타일을 적용하려고합니다 .

다음 코드와 같은 것을 사용할 수 있습니까?

object svg { 
    fill: #fff; 
}

html css svg

— 조슈아 소르 티노
소스

나는 당신이하려는 일에 훌륭하게 작동하는 가벼운 방법을 생각해 냈습니다. 이 Q & A를 참조하십시오 stackoverflow.com/questions/11978995/...

— 드류 베이커

다음 은 실제로 작업을 완료 한 답변 입니다 ( CSS를 사용하여 외부 svg 파일 스타일 속성 조작 에서 )

— Fabien Snauwaert

답변:

108

짧은 대답 : 아니요. 스타일은 문서 경계를 넘어 적용되지 않기 때문입니다.

그러나 <object>태그가 있으므로 스크립트를 사용하여 스타일 시트를 svg 문서에 삽입 할 수 있습니다.

다음과 같이이 코드는이 <object>완전히로드 되었다고 가정합니다 .

var svgDoc = yourObjectElement.contentDocument;
var styleElement = svgDoc.createElementNS("http://www.w3.org/2000/svg", "style");
styleElement.textContent = "svg { fill: #fff }"; // add whatever you need here
svgDoc.getElementById("where-to-insert").appendChild(styleElement);

<link>외부 스타일 시트를 참조하는 요소를 삽입 할 수도 있습니다 .

var svgDoc = yourObjectElement.contentDocument;
var linkElm = svgDoc.createElementNS("http://www.w3.org/1999/xhtml", "link");
linkElm.setAttribute("href", "my-style.css");
linkElm.setAttribute("type", "text/css");
linkElm.setAttribute("rel", "stylesheet");
svgDoc.getElementById("where-to-insert").appendChild(linkElm);

또 다른 옵션은 첫 번째 방법을 사용하여 스타일 요소를 삽입 한 다음 @import 규칙을 추가하는 것입니다 (예 : styleElement.textContent = "@import url(my-style.css)".

물론 스크립팅 없이도 svg 파일에서 스타일 시트에 직접 연결할 수 있습니다. 다음 중 하나가 작동합니다.

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet href="my-style.css" type="text/css"?>
<svg xmlns="http://www.w3.org/2000/svg">
  ... rest of document here ...
</svg>

또는:

<svg xmlns="http://www.w3.org/2000/svg">
  <defs>
    <link href="my-style.css" type="text/css" rel="stylesheet" 
          xmlns="http://www.w3.org/1999/xhtml"/>
  </defs>
  ... rest of document here ...
</svg>

업데이트 2015 : jquery-svg 플러그인을 사용 하여 포함 된 SVG에 js 스크립트 및 css 스타일을 적용 할 수 있습니다 .

— 에릭 달 스트롬
소스

외부 스타일 시트를 연결하는 방법입니까? 그렇지 않다면 가능합니까?

— Joshua Sortino

위는 스타일 요소를 svg에 삽입합니다. 예, 외부 스타일 시트에 연결하기 위해 xhtml 링크 요소를 삽입하거나 xml 스타일 시트 처리 명령을 삽입 할 수도 있습니다 ( w3.org/Style/styling-XML.html 참조 ).

— Erik Dahlström

이것은 꽤 멋진 Erik입니다! 그러나 svgweb : code.google.com/p/svgweb ... 내가 뭘 잘못하고 있는지 어떤 아이디어가 있습니까?

— Matt WD

@ MattW-D : 아마도 그것에 대한 새로운 질문을 열어야 할 것입니다. 크롬에서는 Svgweb이 필요하지 않습니다.

— Erik Dahlström

Erik에게 감사합니다. CSS를 통해 svg에서 글꼴을 사용하는 데 어려움을 겪었습니다. 먼저 CSS를 svg에 연결하는 작업을 시도하고 기적적으로 크로스 브라우저를 시도했습니다!

— 데이브

SVG 파일 자체에 스타일이 포함 된 스타일 블록을 넣어 javsscrpt없이이를 수행 할 수 있습니다.

<style type="text/css">
 path,
 circle,
 polygon { 
    fill: #fff; 
  }
</style>

— R Reveley
소스

SVG를 포함하기 위해 태그를 사용하는 유일한 이유가 SVG의 마크 업으로 소스 코드를 복잡하게 만들고 싶지 않기 때문이라면 SVGInject 와 같은 SVG 인젝터를 살펴 보아야합니다. 합니다.

SVG 삽입은 Javascript를 사용하여 SVG 파일을 HTML 문서에 인라인으로 삽입합니다. 이를 통해 CSS로 SVG를 완벽하게 스타일링 할 수있는 동시에 깨끗한 HTML 소스 코드가 가능합니다. 기본 예는 다음과 같습니다.

<html>
<head>
  <script src="svg-inject.min.js"></script>
</head>
<body>
  <img src="image.svg" onload="SVGInject(this)" />
</body>
</html>

— 와루 야마
소스

대박! 깔끔한 도구에 감사드립니다.

— Deleplace