[html] 외부 CSS로 SVG 스타일을 지정하는 방법은 무엇입니까?

한 가지 (중요한)주의 사항으로 원하는 작업을 수행 할 수 있습니다. 심볼 내의 경로는 외부 CSS를 통해 독립적으로 스타일을 지정할 수 없습니다.이 방법으로 전체 심볼에 대한 속성 만 설정할 수 있습니다. 따라서 심볼에 두 개의 경로가 있고 다른 채우기 색상을 갖기를 원하면 작동하지 않지만 모든 경로를 동일하게하려면 작동해야합니다.

HTML 파일에서 다음과 같은 것을 원합니다.

<style>
  .fill-red { fill: red; }
  .fill-blue { fill: blue; }
</style>

<a href="//www.example.com/">
  <svg class="fill-red">
    <use xlink:href="images/icons.svg#example"></use>
  </svg>
</a>

그리고 외부 SVG 파일에서 다음과 같은 것을 원합니다.

<svg xmlns="http://www.w3.org/2000/svg">
   <symbol id="example" viewBox="0 0 256 256">
    <path d="M120.... />
  </symbol>
</svg>

온 클래스를 스왑 svg에서 (당신의 HTML에) 태그 fill-red에fill-blue 와 TA-다 … 당신은 빨간색 대신 파란색있다.

인라인 CSS가 우선하므로 특정 경로에서 일부 인라인 CSS와 외부 CSS를 혼합하고 일치시킴으로써 외부 CSS와 별도로 경로를 대상으로 지정할 수있는 한계를 부분적으로 피할 수 있습니다. 이 접근 방식은 외부 CSS를 통해 배경 색상을 변경하고 싶지만 아이콘 자체는 ​​항상 흰색 (또는 그 반대) 인 색상 배경에 흰색 아이콘과 같은 작업을 수행하는 경우에 효과적입니다. 따라서 이전과 동일한 HTML과이 svg 코드와 같은 것을 사용하면 빨간색 배경과 흰색 전경 경로가 표시됩니다.

<svg xmlns="http://www.w3.org/2000/svg">
  <symbol id="example" viewBox="0 0 256 256">
    <path class="background" d="M120..." />
    <path class="icon" style="fill: white;" d="M20..." />
  </symbol>
</svg>

답변

<link xmlns="http://www.w3.org/1999/xhtml" rel="stylesheet" href="mystyles.css" type="text/css"/>

<svg>
  <link xmlns="http://www.w3.org/1999/xhtml" rel="stylesheet" href="mystyles.css" type="text/css"/>
  <g>
    <path d=.../>
  </g>
</svg>

<object id="dynamic-svg" type="image/svg+xml" data="your-svg.svg">
    Your browser does not support SVG
</object>
<script>
    var svgHolder = document.querySelector('object#dynamic-svg');
    svgHolder.onload = function () {
        var svgDocument = svgHolder.contentDocument;
        var style = svgDocument.createElementNS("http://www.w3.org/2000/svg", "style");

        // Now (ab)use the @import directive to load make the browser load our css
        style.textContent = '@import url("/css/your-dynamic-css.css");';

        var svgElem = svgDocument.querySelector('svg');
        svgElem.insertBefore(style, svgElem.firstChild);
    };
</script>

#theIdOfTheImgTagWithTheSVGInIt {
    filter: hue-rotate(180deg);
    -webkit-filter: hue-rotate(180deg);
    -moz-filter: hue-rotate(180deg);
    -o-filter: hue-rotate(180deg);
    -ms-filter: hue-rotate(180deg);
}

<?xml-stylesheet type="text/css" href="../svg.css"?>
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="">
  <g>
   <path/>
  </g>
 </svg>

<a class="parent">
  <object data="file.svg"></object>
</a>

$(function() {
  $(document).on('click', '.parent', function(){
    $(this).find('object').contents().find('svg').attr("class","selected");
  }
});

 <svg xmlns="http://www.w3.org/2000/svg" viewBox="" class="selected">

path {
 fill:none;
 stroke:#000;
 stroke-miterlimit:1.41;
 stroke-width:0.7px;
}

.selected path {
 fill:none;
 stroke:rgb(64, 136, 209);
 stroke-miterlimit:1.41;
 stroke-width:0.7px;
}

$('img.svg').each(function(){
  var $img = $(this);
  var imgID = $img.attr('id');
  var imgClass = $img.attr('class');
  var imgURL = $img.attr('src');
  $.get(imgURL, function(data) {
    // Get the SVG tag, ignore the rest
    var $svg = $(data).find('svg');
    // Add replaced image's ID to the new SVG
    if (typeof imgID !== 'undefined') {
      $svg = $svg.attr('id', imgID);
    }
    // Add replaced image's classes to the new SVG
    if (typeof imgClass !== 'undefined') {
      $svg = $svg.attr('class', imgClass+' replaced-svg');
    }
    // Remove any invalid XML tags as per http:validator.w3.org
    $svg = $svg.removeAttr('xmlns:a');
    // Replace image with new SVG
    $img.replaceWith($svg);
  });
});