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

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

다음 코드가 있습니다.

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

할 수 ?<path> 술래잡기?

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

​path {
  fill: blue;
}​

가외 CSS 의를로 CSS 재정의하나타다니납것으로를 하는 것처럼 보입니다.fill적어도 내가 테스트한 WebKit 및 Gecko 기반 브라우저에서 속성.물론, 만약 당신이 이렇게 쓴다면,<path style="fill: green">그러면 외부 CSS도 무시할 수 있습니다.

요소에서 호버링하여 색상을 변경하려면 다음을 수행합니다.

path:hover{
  fill:red;
}

2021년 4월 편집

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

<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 파일을 열고 재생할 수 있습니다.

SVG 밖에서 색을 바꾸는 또 다른 방법을 찾았습니다. SVG 콘텐츠를 가져와서 채우기가 선언된 스타일 규칙을 제거하는 것입니다.그리고 나서 내 CSS 스타일시트에서 채우기를 제어합니다.

    <svg width="100%" height="100%" viewBox="0 0 167 134" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"><g id="Pic_icon"><path id="Pic_icon1" serif:id="Pic_icon" d="M166.667,0l-166.667,0l0,133.333l166.667,0l-0,-133.333Zm-158.276,70.89l32.771,-33.148l48.814,49.375l31.519,-19.575l36.781,32.176l-0,-91.3l-149.885,0l-0,62.472Zm84.426,-36.017c11.25,0 20.384,9.164 20.384,20.451c0,11.287 -9.134,20.451 -20.384,20.451c-11.25,0 -20.384,-9.164 -20.384,-20.451c0,-11.287 9.134,-20.451 20.384,-20.451Z" <!-- remove this -> style="fill:#08e1ea;" -->/></g></svg>

그런 다음 CSS 파일 안에서 다음을 수행합니다.

    svg{ fill: green; }

이제 SVG에서 상위 계층 채우기 선언을 제거하고 있으므로 외부에서 제어합니다.

이것은 저에게 전혀 문제없이 작동합니다.

당신은 이 css를 svg 서클에 넣었습니다.

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

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

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

저는 소스 svg에 최소한의 편집이 필요한 것을 선호했고, HTML 문서에 포함시킬 필요도 없었습니다.은 이옵은활니다합용을 합니다.<object>꼬리표를 달다

---

html에 파일을 합니다.<object>는 또한 특성 나또한 html 속습니다선을 했습니다.width그리고.height이러한 너비와 높이를 사용하여 svg 문서의 크기가 조정되지 않습니다, 저는 css를 사용하여 그 문제를 해결했습니다.transform: scale(...)에 대한 .svg태그가 연결된 svg css 파일에 있습니다.

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

문서에 .svn 파일은 css 파일입니다.소스 svg 경로는 16px로 확장되었고, 4배율로 64로 확장되었습니다.경로가 하나뿐이어서 더 구체적으로 선택할 필요가 없었지만 경로에 채우기 속성이 있어 사용해야 했습니다.!IMPORTANTCSS가 선례를 따르도록 강요합니다.

#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를 넣으십시오.

fill="var(--svgcolor)"

---

CSS:

:root {
  --svgcolor: tomato;
}

유사 클래스를 사용하는 방법

span.github:hover {
  --svgcolor:aquamarine;
}

---

설명.

root = html 페이지.
--tgcolor = 변수입니다.
span.github = 클래스 github, 내부에 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;
    }

이 구문을 사용할 수 있지만 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.sigma

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

다음을 사용하여 치수, 색상 또는 기타 속성을 수정할 수 있어야 합니다.

:host::ng-deep svg {
 ...
}

경로를 사용하는 경우 스트로크 색상을 설정할 수 있습니다.여기서 호버 효과를 사용했습니다.

svg:hover path {
  stroke: blue;
}

SVG 색상을 변경하려면 태그를 사용하여 SVG 이미지를 추가합니다.

<img src="dotted-arrow.svg" class="filter-green"/>

특정 색상으로 필터링하려면 다음 코드펜(코드펜을 열려면 여기를 클릭)을 사용하여 16진수 색상 코드를 CSS 필터로 변환합니다.예: #00에 대한 출력EE00은

filter: invert(42%) sepia(93%) saturate(1352%) hue-rotate(87deg) brightness(119%) contrast(119%);

이 클래스에 CSS 필터를 추가합니다.

.filter-green{
    filter: invert(48%) sepia(79%) saturate(2476%) hue-rotate(86deg) brightness(118%) contrast(119%);
}

이것은 저에게 맞는 간단한 솔루션입니다.

• svg를 "id"가 있는 div 태그에 넣습니다.

그리고나서

#id-div svg g {
     fill: #3366FF; 
}

CSS를 사용하여 SVG를 변경하려면 SVG 자체의 채우기 속성을 대상으로 해야 합니다.SVG에 채우기 속성이 없는 경우에도 채우기 속성을 사용할 수 있습니다.이것은 프레임워크에 관계없이 CSS에서 작동합니다.다음과 같은 목표를 설정할 수 있습니다(SVG 수업을 더 쉽게 진행하고 싶습니다).

.class {
fill: #fff;
}

언급URL : https://stackoverflow.com/questions/9529300/can-i-change-the-fill-color-of-an-svg-path-with-css