SVG를 인라인하지 않고 스타일을 지정하는 가장 좋은 방법

약 10 개의 메뉴가있는 메뉴가 있습니다. 각 항목에는 자체 아이콘이 있습니다. 이 아이콘은 SVG 파일입니다. 예를 들어SVG를 인라인하지 않고 스타일을 지정하는 가장 좋은 방법

<li class="active"> 
    <a href="/home"> 
     <svg version="1.1" id="svg-menu-home" 
      xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
      x="0px" y="0px" width="31px" height="31px" viewBox="-8 -8 31 31" 
      overflow="visible" enable-background="new -8 -8 31 31" xml:space="preserve"> 
      <mask maskUnits="userSpaceOnUse" x="0" y="0" width="15" height="15" id="maskTop"> 
       <polygon fill="#FFFFFF" points="12,6.036 2,6.036 2,14.036 6,14.036 6,9.036 8,9.036 8,14.036 12,14.036"/> 
       <polygon fill="#FFFFFF" points="7,0.036 0,7.036 14,7.036"/> 
      </mask> 
      <rect mask="url(#maskTop)" fill="#939598" width="15" height="15"/> 
     </svg> 
     <span>Home</span> 
    </a> 
</li>

사용자가 내가 그것을 클래스 등을 지정할 수있는 메뉴 항목 (호버 선택, 활성)과 상호 작용

이

<style> 
    li.active svg polygon { 
     fill: red; 
    } 
</style>

문제는 다음과 같습니다 :

이 갖는 SVG의 상당수가 인라인 파일 전체 소스 인라인을 갖는

내가 같은 CSS를 사용하여 SVG를 변경할 수있는 유일한 방법이 될 것 같다 코드를 읽을 수 없게 만들고
다른 곳에서 참조 할 경우 SVG를 유지 관리하기가 쉽지 않습니다.

나는 차라리 됨 src 파일 로는 IMG (<img src="x.jpg"/>) 및 자바 스크립트에 의존 솔루션을 방지 할 방법을 참조 할 것.

그러나 내가 본 모든 방법은 SVG 요소의 CSS 스타일링 (또는 JS 필요)을 허용하지 않습니다.

모든 의견/해결 방법?

출처

2012-08-29 donohoe

셀렉터는 내부 DOM에 연결할 수 없습니다. 즉, 외부 SVG에 연결할 수 없으며 선택기에서 해당 SVG 내의 요소를 찾을 수 없습니다. – BoltClock

xml-stylesheet에 대해 들었습니까? –

아마

없는 가장 우아한 솔루션,하지만 당신은 PHP로 정리할 수는 다음과 같습니다

<?php include 'inc/svg-menu-home.svg.php'; ?>

출처

2012-08-29 18:25:46 piatek

내가 http://raphaeljs.com/ 이상 봐 가지고 나쁜 방법이 아니다라고 생각합니다. 이것은 http://screencast.com/t/rNr0Cbqkb (모든 영역은 SVG입니다)을 만들 때 도움이되었습니다

출처

2012-08-29 18:38:14 stefanz

SVG를 인라인하지 않고 스타일을 지정하는 가장 좋은 방법

답변

관련 문제