[css] CSS로 svg 경로의 채우기 색상을 변경할 수 있습니까?

Program / 글쓴이

다음 코드가 있습니다.

  <span>
     <svg height="32" version="1.1" width="32" xmlns="http://www.w3.org/2000/svg" style="overflow: hidden; position: relative; left: -0.0166626px; top: -0.983337px;">
        <desc></desc>
        <defs/>
        <path style="" fill="#333333" stroke="none" d="M15.985,5.972C8.422,5.972,2.289999999999999,10.049,2.289999999999999,15.078C2.289999999999999,17.955,4.302999999999999...............1,27.68,22.274Z"/>
      </svg>&nbsp;
  </span>

경로 태그 내에서 실제로 변경하지 않고 CSS 경로 또는 다른 방법으로 SVG 경로의 채우기 색상을 변경할 수 있습니까?

답변

예, CSS를 SVG에 적용 할 수 있지만 HTML 스타일을 지정할 때와 마찬가지로 요소를 일치시켜야합니다. 모든 SVG 경로에 적용하려면 다음과 같이 사용할 수 있습니다.

​path {
    fill: blue;
}​

외부 CSS fill는 적어도 테스트 한 WebKit 및 Gecko 기반 브라우저에서 경로 속성 을 재정의하는 것으로 보입니다 . 물론 작성하면 <path style="fill: green">외부 CSS도 무시합니다.

답변

요소를 가리키면 색상을 변경하려면 다음을 시도하십시오.

path:hover{
  fill:red;
}

답변

SVG 파일의 소스 코드로 들어가면 fill 속성을 수정하여 색상 채우기를 변경할 수 있습니다.

<svg fill="#3F6078" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
</svg>

자주 사용하는 텍스트 편집기를 사용하여 SVG 파일을 열어서 재생하십시오.

답변

이 CSS를 svg circle에 넣습니다. 

svg:hover circle{
    fill: #F6831D;
    stroke-dashoffset: 0;
    stroke-dasharray: 700;
    stroke-width: 2;
}

답변

css-tricks에 대한 놀라운 리소스를 발견했습니다. https://css-tricks.com/using-svg/

거기에 설명 된 몇 가지 해결책이 있습니다.

나는 소스 svg에 대한 최소한의 편집이 필요하고 html 문서에 포함시킬 필요가없는 것을 선호했습니다. 이 옵션은 <object>태그를 사용합니다 .

<object>;를 사용하여 svg 파일을 HTML에 추가하십시오 . 또한 html 속성 width및을 선언했습니다 height. 이 너비와 높이를 사용하여 svg 문서의 크기가 조정되지 않아 관련 svg css 파일 transform: scale(...)의 svg태그에 대해 css 문을 사용하여 문제를 해결했습니다 .

<object type="image/svg+xml" data="myfile.svg" width="64" height="64"></object>

svn 문서에 첨부 할 CSS 파일을 작성하십시오. 내 소스 svg 경로는 16px로 크기가 조정되었으며 4 배로 64로 업 스케일했습니다. 그것은 하나의 경로 만 가지고 있었기 때문에 더 구체적으로 선택할 필요가 없었지만 경로에는 채우기 속성 !IMPORTANT이있어 CSS가 우선하도록 강요했습니다.

#svg2 {
    width: 64px; height: 64px;
    transform: scale(4);
}
path {
    fill: #333 !IMPORTANT;
}

시작 <svg태그 전에 대상 svg 파일을 편집하여 스타일 시트를 포함하십시오. href는 svg 파일 URL과 관련이 있습니다.

<?xml-stylesheet type="text/css" href="myfile.css" ?>

답변

이 구문을 사용할 수 있지만 SVG 파일에서 약간의 변경이 필요합니다. SVG 자체에서 채우기 / 획을 제거하십시오.

icon.svg

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
<!-- use symbol instead of defs and g,
  must add viewBox on symbol just copy yhe viewbox from the svg tag itself
  must add id on symbol
-->
<symbol id="location" viewBox="0 0 430.114 430.114">
  <!-- add all the icon's paths and shapes here -->
  <path d="M356.208,107.051c-1.531-5.738-4.64-11.852-6.94-17.205C321.746,23.704,261.611,0,213.055,0   C148.054,0,76.463,43.586,66.905,133.427v18.355c0,0.766,0.264,7.647,0.639,11.089c5.358,42.816,39.143,88.32,64.375,131.136   c27.146,45.873,55.314,90.999,83.221,136.106c17.208-29.436,34.354-59.259,51.17-87.933c4.583-8.415,9.903-16.825,14.491-24.857   c3.058-5.348,8.9-10.696,11.569-15.672c27.145-49.699,70.838-99.782,70.838-149.104v-20.262   C363.209,126.938,356.581,108.204,356.208,107.051z M214.245,199.193c-19.107,0-40.021-9.554-50.344-35.939   c-1.538-4.2-1.414-12.617-1.414-13.388v-11.852c0-33.636,28.56-48.932,53.406-48.932c30.588,0,54.245,24.472,54.245,55.06   C270.138,174.729,244.833,199.193,214.245,199.193z"/>
</symbol>

icon.html

<svg><use xlink:href="file_path/location.svg#location"></use></svg>

답변

svg의 경로 채우기 색상을 변경할 수 있습니다. CSS 스 니펫은 아래를 참조하십시오.

  1. 모든 경로에 색상을 적용하려면 svg > path{ fill: red }

  2. 첫 번째 d 경로를 신청하려면 : svg > path:nth-of-type(1){ fill: green }

  3. 두 번째 d 경로를 신청하려면 : svg > path:nth-of-type(2){ fill: green}

  4. 다른 d 경로를 신청하려면 경로 번호 만 변경하십시오.
    svg > path:nth-of-type(${path_number}){ fill: green}

  5. Angular 2-8에서 CSS를 지원하려면 캡슐화 개념을 사용하십시오.

:host::ng-deep svg path:nth-of-type(1){
        fill:red;
    }