CSS 데이터 URI를 통해 렌더링 된 SVG에서 CSS 선택기를 사용할 수 있습니까?

Question

CSS 선택기를 통해 스타일을 지정하기위한 클래스 이름이있는 인라인 SVG가 있습니다. SVG를 내 CSS에 배경 이미지 데이터 URI로 가져오고 싶습니다만, CSS 선택기를 더 이상 사용할 수 없다는 뜻입니까?

나는 기존 StackOverflow 응답을 읽었으며 "테이크 아웃은 잠재적으로 다른 사이트의 이미지 또는 리소스이기 때문에 CSS를 적용 할 수 없습니다"라고 생각됩니다.

How do I change the colour of an SVG image in a CSS content property?

Modify SVG fill color when being served as Background-Image

그러나이 질문도 다시 몇 년 대답, 그래서 지금은 해결 방법을 사용할 수 있다는 것을 희망하고 있었다

.

마지막으로, SVG 마스킹을 사용하고 단일 색을 요소의 배경색을 설정하여 SVG 부분에 적용 할 수있는 몇 가지 솔루션이 있습니다. 2 ~ 4 색을 사용하고 싶기 때문에 내 경우에는 충분하지 않습니다. 인라인되고 반대로 외부 리소스로 포함 된 SVG 문서를 쿼리 할 수 ​​없습니다 호스트 문서에

.primary { 
 
\t fill: rgb(87, 143, 213); 
 
\t stroke: rgb(87, 143, 213); 
 
} 
 
.secondary { 
 
\t fill: rgb(176, 202, 234); 
 
} 
 
.secondaryShadeTint { 
 
\t fill: purple; 
 
} 
 
.youHaveMail { 
 
\t fill: red; 
 
} 
 

 
svg, div#dataURI { 
 
    width: 100px; 
 
    height: 100px; 
 
} 
 
div#dataURI { 
 
    background-size: 100px, 100px; 
 
    background-repeat: no-repeat; 
 
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 500 500' width='500' height='500' xmlns='http%3A//www.w3.org/2000/svg' xmlns:link='http%3A//www.w3.org/1999/xlink'%3E%3Cdefs%3E%3Cmask id='_mail_envelope_mask' x='0' y='0' width='500' height='500' maskUnits='userSpaceOnUse'%3E%3Crect x='0' y='0' width='500' height='500' fill='white'%3E%3C/rect%3E%3Cpolygon points='80%2C170 250%2C330 420%2C170' fill='black'%3E%3C/polygon%3E%3C/mask%3E%3C/defs%3E%3Cpolygon class='primary' points='80%2C140 250%2C300 420%2C140'%3E%3C/polygon%3E%3Cpolygon class='secondary' points='80%2C420 250%2C230 420%2C420' mask='url%28%23_mail_envelope_mask%29'%3E%3C/polygon%3E%3Cpolygon class='secondary' points='70%2C160 70%2C400 185%2C270'%3E%3C/polygon%3E%3Cpolygon class='secondary' points='430%2C160 430%2C400 315%2C270'%3E%3C/polygon%3E%3Ccircle class='youHaveMail' cx='375' cy='160' r='100'%3E%3C/circle%3E%3C/svg%3E") 
 
}

<h1>SVG</h1> 
 
<svg viewBox="0 0 500 500" width="500" height="500"> 
 
    <defs> 
 
    <mask id="_mail_envelope_mask" x="0" y="0" width="500" height="500" maskUnits="userSpaceOnUse"> 
 
     <rect x="0" y="0" width="500" height="500" fill="white"></rect> 
 
     <polygon points="80,170 250,330 420,170" fill="black"></polygon> 
 
    </mask> 
 
    </defs> 
 
    <polygon class="primary" points="80,140 250,300 420,140"></polygon> 
 
    <polygon class="secondary" points="80,420 250,230 420,420" mask="url(#_mail_envelope_mask)"></polygon> 
 
    <polygon class="secondary" points="70,160 70,400 185,270"></polygon> 
 
    <polygon class="secondary" points="430,160 430,400 315,270"></polygon> 
 
    <circle class="youHaveMail" cx="375" cy="160" r="100"></circle> 
 
</svg> 
 
<h1>Data URI</h1> 
 
<div id="dataURI"></div>

Answer 1

선택기 : 여기

내 이미지의 SVG 및 데이터 URI 버전입니다 호스트 문서 마크 업과 함께.