이 기술을 http://css-tricks.com/svg-fallbacks/ 사용 하고 svg 색상을 변경하고 싶지만 지금까지는 그렇게 할 수 없었습니다. 나는 이것을 CSS에 넣었지만 내 이미지는 항상 검은 색입니다. 내 코드 :
.change-my-color {
fill: green;
}
<svg>
<image class="change-my-color" xlink:href="https://svgur.com/i/AFM.svg" width="96" height="96" src="ppngfallback.png" />
</svg>
답변
그런 식으로 이미지의 색상을 변경할 수 없습니다. SVG를 이미지로로드하면 브라우저에서 CSS 또는 Javascript를 사용하여 이미지가 표시되는 방식을 변경할 수 없습니다.
당신이 당신의 SVG 이미지를 변경하려는 경우, 당신은 그것을 사용하여로드해야 <object>
, <iframe>
또는 사용하여 <svg>
인라인.
페이지의 기술을 사용하려면 SVG 지원을 확인하고 조건부로 대체 이미지를 표시하거나 표시 할 수없는 Modernizr 라이브러리가 필요합니다. 그런 다음 SVG를 인라인하고 필요한 스타일을 적용 할 수 있습니다.
보다 :
SVG를 인라인하고 대체 이미지에 클래스 이름 ( my-svg-alternate
)으로 태그를 지정할 수 있습니다 .
<svg width="96px" height="96px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
<path id="time-3-icon" .../>
</svg>
<image class="my-svg-alternate" width="96" height="96" src="ppngfallback.png" />
그리고 CSS no-svg
에서 Modernizr (CDN : http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.7.2.js ) 의 클래스를 사용하여 SVG 지원을 확인하십시오. SVG 지원이없는 경우 SVG 블록이 무시되고 이미지가 표시되고, 그렇지 않으면 이미지가 DOM 트리에서 제거됩니다 ( display: none
).
.my-svg-alternate {
display: none;
}
.no-svg .my-svg-alternate {
display: block;
width: 100px;
height: 100px;
background-image: url(image.png);
}
그런 다음 인라인 요소의 색상을 변경할 수 있습니다.
#time-3-icon {
fill: green;
}
답변
2020 답변
SVG 색상을 변경하려면
<img>
태그를 사용하여 SVG 이미지를 추가하십시오 .
<img src="dotted-arrow.svg" class="filter-green"/>
- 특정 색상으로 필터링하려면 다음 코드 펜 (여기를 클릭하여 코드 펜 열기) 을 사용하여 16 진 색상 코드를 CSS 필터로 변환하십시오.
예를 들어,에 대한 출력 #00EE00
은
filter: invert(42%) sepia(93%) saturate(1352%) hue-rotate(87deg) brightness(119%) contrast(119%);
filter
이 클래스에 CSS 를 추가하십시오 .
.filter-green{
filter: invert(48%) sepia(79%) saturate(2476%) hue-rotate(86deg) brightness(118%) contrast(119%);
}
답변
SVG의 색상을 변경하려면 텍스트 편집기에서 svg 파일 을 열어 svg 코드를 직접 변경할 수 있습니다 . 코드는 아래 코드처럼 보일 수 있습니다
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!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" x="0px" y="0px"
width="500px" height="500px" viewBox="0 0 500 500" enable-background="new 0 0 500 500" xml:space="preserve">
<g>
<path d="M114.26,436.584L99.023,483h301.953l-15.237-46.416H114.26z M161.629,474.404h-49.592l9.594-29.225h69.223
C181.113,454.921,171.371,464.663,161.629,474.404z"/>
/*Some more code goes on*/
</g>
</svg>
path, circle, polygon 등과 같은 일부 XML 태그 가 있음을 알 수 있습니다 . 여기에서 style 속성을 사용하여 자신의 색상을 추가 할 수 있습니다 . 아래 예를보십시오
<path style="fill:#AB7C94;" d="M114.26,436.584L99.023,483h301.953l-15.237-46.416H114.26z M161.629,474.404h-49.592l9.594-29.225h69.223
C181.113,454.921,171.371,464.663,161.629,474.404z"/>
필요한 태그의 SVG를 얻을 수 있도록 모든 속성에 style 속성을 추가하십시오
답변
필터 설정을 통해 SVG를 색칠하기 위해 테스트 페이지를 추가했습니다.
EG
filter: invert(0.5) sepia(1) saturate(5) hue-rotate(175deg)
https://blog.union.io/code/2017/08/10/img-svg-fill/ 에서 아이디어를 얻었습니다.
답변
경로 정보가있는 SVG 만 . 당신은 이미지에 그렇게 할 수 없습니다 .. 경로로 당신은 스트로크를 변경하고 정보를 채울 수 있고 당신은 끝났습니다. 일러스트 레이터처럼
그래서 : CSS를 통해 경로 fill
값을 덮어 쓸 수 있습니다
path { fill: orange; }
그러나 호버링 효과가 발생할 때 텍스트로 변경하려는 경우보다 유연한 방법을 원한다면 사용하십시오.
path { fill: currentcolor; }
body {
background: #ddd;
text-align: center;
padding-top: 2em;
}
.parent {
width: 320px;
height: 50px;
display: block;
transition: all 0.3s;
cursor: pointer;
padding: 12px;
box-sizing: border-box;
}
/*** desired colors for children ***/
.parent{
color: #000;
background: #def;
}
.parent:hover{
color: #fff;
background: #85c1fc;
}
.parent span{
font-size: 18px;
margin-right: 8px;
font-weight: bold;
font-family: 'Helvetica';
line-height: 26px;
vertical-align: top;
}
.parent svg{
max-height: 26px;
width: auto;
display: inline;
}
/**** magic trick *****/
.parent svg path{
fill: currentcolor;
}
<div class='parent'>
<span>TEXT WITH SVG</span>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128" viewBox="0 0 32 32">
<path d="M30.148 5.588c-2.934-3.42-7.288-5.588-12.148-5.588-8.837 0-16 7.163-16 16s7.163 16 16 16c4.86 0 9.213-2.167 12.148-5.588l-10.148-10.412 10.148-10.412zM22 3.769c1.232 0 2.231 0.999 2.231 2.231s-0.999 2.231-2.231 2.231-2.231-0.999-2.231-2.231c0-1.232 0.999-2.231 2.231-2.231z"></path>
</svg>
</div>
답변
가장 쉬운 방법은 https://icomoon.io/app/#/select 등과 같은 서비스를 사용하여 SVG에서 글꼴을 만드는 것입니다 . SVG를 업로드하고 “글꼴 생성”을 클릭 한 다음 글꼴 파일과 CSS를 측면에 포함시키고 다른 텍스트처럼 사용하고 스타일을 지정하십시오. 스타일링이 훨씬 쉬워지기 때문에 항상 이렇게 사용합니다.
편집 : @ CodeMouse92에 의해 논평 된 기사 에서 언급했듯이 아이콘 글꼴은 화면 판독기를 엉망으로 만듭니다 (SEO에 좋지 않을 수 있습니다). 따라서 SVG를 고수하십시오.
답변
배경색 이 있는 상자 요소의 SVG 마스크 는 다음과 같습니다.
.icon{
--size : 70px;
display : inline-block;
width : var(--size);
height : var(--size);
transition : .12s;
-webkit-mask-size: cover;
mask-size : cover;
}
.icon-bike{
background: black;
-webkit-mask-image: url(https://image.flaticon.com/icons/svg/89/89139.svg);
mask-image: url(hhttps://image.flaticon.com/icons/svg/89/89139.svg);
animation: 1s frames infinite ease;
}
@keyframes frames {
50% { background:red; }
}
<i class="icon icon-bike" style="--size:150px"></i>
참고 -Internet Explorer 브라우저 에서는 SVG 마스크가 지원되지 않습니다.
![](http://daplus.net/wp-content/uploads/2023/04/coupang_part-e1630022808943-2.png)