Can you use CSS selectors on SVG rendered via CSS Data URI?

问题

I have some inline SVG with class names for styling via CSS selectors. I would like to bring the SVG into my CSS as a background-image data URI, but does this mean I can't use the CSS selectors anymore?

I've read the existing StackOverflow responses, and the takeaway seems to be "You can't apply CSS because it's an image or resource from potentially another site".

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

But these questions were asked and answered a few years back, so I'm hoping that there is a workaround available now.

Lastly, there were some solutions where you could use SVG masking and apply a single color to parts of your SVG by setting the element's background color. This is not sufficient for my case, since I would like to use 2 to 4 colors.

Here are SVG and Data URI versions of my image:

.primary {
	fill: rgb(87, 143, 213);
	stroke: rgb(87, 143, 213);
}
.secondary {
	fill: rgb(176, 202, 234);
}
.secondaryShadeTint {
	fill: purple;
}
.youHaveMail {
	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>

回答1:

Selectors in a host document cannot query an SVG document that is embedded as an external resource as opposed to being inlined with the host document markup.

来源：https://stackoverflow.com/questions/41639133/can-you-use-css-selectors-on-svg-rendered-via-css-data-uri

标签

css

svg

css-selectors

data-uri