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

developer tip

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

optionbox 2020. 10. 10. 09:58

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

각 SVG 파일 내에서 직접적으로가 아니라 외부 스타일 시트를 통해 색상을 수정하고 싶은 여러 SVG 그래픽이 있습니다. 그래픽을 인라인으로 넣지 않고 내 이미지 폴더에 저장하고 가리키고 있습니다.

툴팁이 작동 할 수 있도록 이러한 방식으로 구현 <a>했으며 링크를 허용하기 위해 각각을 태그로 래핑했습니다 .

<a href='http://youtube.com/...' target='_blank'><img class='socIcon' src='images/socYouTube.svg' title='View my videos on YouTube' alt='YouTube' /></a>

다음은 SVG 그래픽의 코드입니다.

<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet href="stylesheets/main.css" type="text/css"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 56.69 56.69">
<g>
    <path d="M28.44......./>
</g>
</svg>

외부 CSS 파일 (main.css)에 다음을 넣습니다.

.socIcon g {fill:red;}

그러나 그래픽에는 영향을 미치지 않습니다. 나는 또한 .socIcon g path {} 및 .socIcon path {}를 시도했습니다.

문제가 있거나 내 구현이 외부 CSS 수정을 허용하지 않거나 단계를 놓쳤습니까? 도와 주셔서 정말 감사합니다! 외부 스타일 시트를 통해 SVG 그래픽의 색상을 수정할 수있는 기능이 필요하지만 툴팁과 링크 기능을 잃을 수는 없습니다. (하지만 툴팁없이 살 수 있을지도 모릅니다.) 감사합니다!

main.css 파일은 SVG 파일이 HTML에 인라인으로 포함 된 경우 SVG의 콘텐츠에만 영향을 미칩니다.

https://developer.mozilla.org/en/docs/SVG_In_HTML_Introduction

<html>
  <body>
  <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 56.69 56.69">
    <g>
      <path d="M28.44......./>
    </g>
  </svg>
</html>

SVG를 파일에 보관하려면 SVG 파일 내부에 CSS를 정의해야합니다.

스타일 태그로 할 수 있습니다.

http://www.w3.org/TR/SVG/styling.html#StyleElementExample

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
     width="50px" height="50px" viewBox="0 0 50 50">
  <defs>
    <style type="text/css"><![CDATA[
      .socIcon g {
        fill:red;
      }
    ]]></style>
  </defs>
  <g>
    <path d="M28.44......./>
  </g>
</svg>

서버 측 도구를 사용하여 활성 스타일에 따라 스타일 태그를 업데이트 할 수 있습니다. 루비에서는 Nokogiri로 이것을 달성 할 수 있습니다. SVG는 XML 일뿐입니다. 따라서이 작업을 수행 할 수있는 XML 라이브러리가 많이 있습니다.

그렇게 할 수 없다면 마치 PNG처럼 사용하면됩니다. 각 스타일에 대한 세트를 만들고 스타일을 인라인으로 저장합니다.

한 가지 (중요한)주의 사항으로 원하는 작업을 수행 할 수 있습니다. 심볼 내의 경로는 외부 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>

JavaScript에서 스타일 요소를 동적으로 만들고 SVG 요소에 추가하여 SVG 스타일을 지정할 수 있습니다. Hacky이지만 작동합니다.

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

원한다면 PHP에서 동적으로 JavaScript를 생성 할 수 있습니다. JavaScript에서 이것이 가능하다는 사실은 수많은 가능성을 열어줍니다.

취할 수있는 한 가지 접근 방식은 CSS 필터를 사용하여 브라우저에서 SVG 그래픽의 모양을 변경하는 것입니다.

예를 들어 SVG 코드 내에 빨간색 채우기 색상을 사용하는 SVG 그래픽이있는 경우 180 도의 색조 회전 설정을 사용하여 보라색으로 바꿀 수 있습니다.

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

원하는 색상을 찾으려면 다른 색조 회전 설정을 시험해보십시오.

명확하게 말하면 위의 CSS는 HTML 문서에 적용된 CSS에 포함됩니다. SVG 코드의 스타일이 아니라 HTML 코드에서 img 태그의 스타일을 지정합니다.

그리고 이것은 검정, 흰색 또는 회색으로 채워진 그래픽에서는 작동하지 않습니다. 해당 색상의 색조를 회전하려면 실제 색상이 있어야합니다.

먼저 외부 svg 이미지를 인라인하여 수행 할 수 있어야합니다. 예를 들어 여기를보십시오 :

모든 Svg 이미지를 인라인 Svg로 바꾸기 | 자바 스크립트 | Jess Frazelle의 코드 조각 라이브러리

<image>태그에 사용되는 경우 SVG는 개인 정보 보호를 위해 단일 파일에 포함되어야합니다. 이 버그질라 버그 에는 이것이 왜 그런지에 대한 자세한 내용이 있습니다. 안타깝게도과 같은 다른 태그 <iframe>는 링크로 작동하지 않으므로 <style>파일 자체 의 태그에 CSS를 포함해야하기 때문에 사용할 수 없습니다 .

이 작업을 수행하는 또 다른 방법은 기본 html 파일에 SVG 데이터를 포함하는 것입니다.

<a href='http://youtube.com/...' target='_blank'>
  <svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 56.69 56.69">
    <g>
        <path d="M28.44......./>
    </g>
  </svg>
</a>

HTML <link>태그를 사용하여 외부 CSS 파일로 스타일을 지정할 수 있습니다.

"실제로 사용자가 내 사이트에 대해 선택한 색 구성표에 따라 이러한 이미지의 색상을 변경하겠습니다." - 요르단 시간 전

이를 위해 PHP를 사용하는 것이 좋습니다. 아이콘 글꼴없이이 작업을 수행하는 더 좋은 방법은 없으며, 사용하지 않으려면 다음을 시도해 볼 수 있습니다.

<?php

    header('Content-Type: image/svg+xml');
    echo '<?xml version="1.0" encoding="utf-8"?>';
    $color = $_GET['color'];

?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 56.69 56.69">
    <g>
        <path fill="<?php echo $color; ?>" d="M28.44..."/>
    </g>
</svg>

나중에이 filename.php?color=#ffffff파일을 사용하여 원하는 색상으로 svg 파일을 가져올 수 있습니다 .

<object>태그를 사용 하여 svg를 포함 하는 경우 외부 CSS 스타일 시트로 동적 스타일을 갖는 매우 빠른 솔루션 입니다.

이 예제는 <svg>상위 요소를 클릭 할 때 루트 태그에 클래스를 추가합니다 .

file.svg :

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

html :

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

Jquery :

$(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">

그러면 CSS를 관리 할 수 있습니다.

svg.css :

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

나에게 맞는 것 : @import 규칙이있는 스타일 태그

<defs>
    <style type="text/css">
        @import url("svg-common.css");
    </style>
</defs>

나는 그것의 오래된 게시물을 알고 있지만이 문제를 해결하기 위해 ... 당신은 잘못된 장소에서 수업을 사용하고 있습니다 : D

우선 사용할 수 있습니다.

svg { fill: red; }

당신에 main.css이 빨간색 얻을 수 있습니다. 이것은 효과가 있습니다. 특정 경로를 얻기 위해 노드 선택기를 적절하게 사용할 수도 있습니다.

두 번째로 클래스를 img-Tag로 디클레어했습니다.

<img class='socIcon'....

실제로 SVG 내부에서 declair해야합니다. 다른 경로가 있다면 물론 더 많은 것을 정의 할 수 있습니다.

<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet href="stylesheets/main.css" type="text/css"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 56.69 56.69">
<g>
    <path class="myClassForMyPath" d="M28.44......./>
</g>
</svg>

지금 당신은 당신의 색상을 변경할 수 있습니다 main.css같은

.myClassForMyPath {
    fill: yellow;
}

외부 스타일

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 56.69 56.69">

  <style>
	@import url(main.css);
  </style>

  <g>
    <path d="M28.44......./>
  </g>
</svg>

내부 스타일 용

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 56.69 56.69">

  <style>
	    .socIcon g {fill:red;}
  </style>

  <g>
    <path d="M28.44......./>
  </g>
</svg>

참고 : <img>태그 안에 SVG를 포함하면 외부 스타일이 작동하지 않습니다 . <div>태그 내에서 완벽하게 작동합니다.

@leo는 angularJS 버전입니다. 다시 한 번 감사드립니다.

G.directive ( 'imgInlineSvg', function () {

return {
    restrict : 'C',
    scope : true,
    link : function ( scope, elem, attrs ) {

        if ( attrs.src ) {

            $ ( attrs ).each ( function () {
                var imgID    = attrs.class;
                var imgClass = attrs.class;
                var imgURL   = attrs.src;

                $.get ( imgURL, function ( data ) {

                    var $svg = $ ( data ).find ( 'svg' );
                    if ( typeof imgID !== 'undefined' ) {
                        $svg = $svg.attr ( 'id', imgID );
                    }

                    if ( typeof imgClass !== 'undefined' ) {
                        $svg = $svg.attr ( 'class', imgClass + ' replaced-svg' );
                    }

                    $svg = $svg.removeAttr ( 'xmlns:a' );

                    elem.replaceWith ( $svg );

                } );

            } );
        }

    }

}

} );

This method will work if the svg is viewed within a web browser but as soon as this code is uploaded to the sever and the class for the svg icon is coded as if it was a background image the color is lost and back to the default color. Seems like the color can not be changed from the external style sheet even though both the svg class for the color and the top layer class for the display and position of the svg are both mapped to the same directory.

참고URL : https://stackoverflow.com/questions/18434094/how-to-style-svg-with-external-css

'developer tip' 카테고리의 다른 글

"단순히 C / C ++로 프로그래밍하는 것을 선호"하기 때문에 Android 앱을 C / C ++로 작성하면 안되는 이유는 무엇입니까? (0)	2020.10.10
Argparse 인수에 특정 값 허용 (0)	2020.10.10
파이썬에서 클래스의 파일 경로를 어떻게 얻습니까? (0)	2020.10.10
Markdown / Textile을 HTML로 변환하는 Javascript (이상적으로는 Markdown / Textile로 다시 변환) (0)	2020.10.10
mysql 테이블이 myISAM 또는 InnoDB 엔진을 사용하고 있는지 어떻게 알 수 있습니까? (0)	2020.10.10

현재글외부 CSS로 SVG 스타일을 지정하는 방법은 무엇입니까?

optionbox

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

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

'developer tip' 카테고리의 다른 글

'developer tip'의 다른글

티스토리툴바

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

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

'developer tip' 카테고리의 다른 글

'developer tip'의 다른글

관련글

티스토리툴바