Html 用作背景图像时如何修改 SVG 图像的填充 colored颜色

polygon.mystar {
    fill: blue;
}​

circle.mycircle {
    fill: green;
}

html {      
    background-image: url(../img/bg.svg);
}

<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="320px" height="100px" viewBox="0 0 320 100" enable-background="new 0 0 320 100" xml:space="preserve">
<polygon class="mystar" fill="#3CB54A" points="134.973,14.204 143.295,31.066 161.903,33.77 148.438,46.896 151.617,65.43 134.973,56.679 
    118.329,65.43 121.507,46.896 108.042,33.77 126.65,31.066 "/>
<circle class="mycircle" fill="#ED1F24" cx="202.028" cy="58.342" r="12.26"/>
</svg>

.element-color(@color) {
  background-image: url('data:image/svg+xml;utf8,<svg ...><g stroke="@{color}" ... /></g></svg>');
}

.element-color(#fff);

@mixin element-color($color) {
  background-image: url('data:image/svg+xml;utf8,<svg ...><g stroke="#{$color}" ... /></g></svg>');
}

@include element-color(#fff);

// color: red
background-image: url('data:image/svg+xml;utf8,<svg ...><g stroke="red" ... /></g></svg>');

Html相关问答推荐

HTML CSS如何使用图像作为中心点将元素置于中心

springBoot + Thymeleaf：基于Locale设置页面语言

通过POST方法提交html表单时CSV文件无法通过(在使用Django的上下文中)

如何在htmlAngular 17的@for中使用索引

如何防止可见的滑动抽屉，同时转移HTML方向？

悬停效果在新西兰表上不起作用

MatSnackBar： colored颜色 不起作用

在窄屏幕上显示表格，每个单元格占一行

天使17：令人惊叹的动画

IFRAME中的Chrome图像未调整大小

如何在没有包装元素的情况下在React(Next.js)中呈现HTML注释

为什么要添加换行符(至少在 Google Chrome 中)

当底部进入视图时从底部粘性定位

Tailwind 网格行高度可防止拉伸到最高行的所有相同高度

当我们在vue中使用截断大文本时如何显示标题属性？

网页设计不适合移动设备

将表格标题和过滤器调整到表格的顶部边缘

把标题、段落和图片放在一起

如何通过可见文本使用 Selenium 定位元素

禁用的 Select 标签没有在 chrome 上的 css 中指定的 colored颜色