您可以在通过CSS数据URI呈现的SVG上使用CSS选择器吗? [英] Can you use CSS selectors on SVG rendered via CSS Data URI?

问题描述

我有一些内联SVG，其类名称可通过CSS选择器进行样式设置.我想将SVG作为背景图像数据URI引入我的CSS，但这是否意味着我不能再使用CSS选择器了?

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?

我已经阅读了现有的StackOverflow响应，并且得出的结论似乎是您不能应用CSS，因为它是来自其他站点的图像或资源".

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".

如何在CSS content属性中更改SVG图像的颜色?

在用作背景图像时修改SVG填充颜色

但是几年前这些问题被问到并回答了，所以我希望现在有一个解决方法.

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

最后，在一些解决方案中，您可以使用SVG遮罩，并通过设置元素的背景色来将单一颜色应用于SVG的某些部分.对于我的情况，这还不够，因为我想使用2到4种颜色.

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.

以下是我图像的SVG和数据URI版本:

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>

推荐答案

宿主文档中的选择器无法查询作为外部资源嵌入的SVG文档，而不是与宿主文档标记内联.

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.

这篇关于您可以在通过CSS数据URI呈现的SVG上使用CSS选择器吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！