css - 将填充颜色更改为 SVG

标签 css svg sass

<分区>

我想更改我的 SVG 图像的填充颜色,但它似乎不起作用...

我的代码:

&:after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  height: 50px;
  width: 50px;
  background-color: blue;
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI1MTJweCINCgkgaGVpZ2h0PSI1MTJweCIgdmlld0JveD0iMCAwIDUxMiA1MTIiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDUxMiA1MTIiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPGcgaWQ9IkNhbHF1ZV8xIiBkaXNwbGF5PSJub25lIj4NCgk8ZyBkaXNwbGF5PSJpbmxpbmUiPg0KCQk8cGF0aCBkPSJNMjY3LjY0NiwxNDcuNzM2Yy02LjM3OS01LjQ4Mi0xNi44NzctNS40ODItMjAuMzcxLDBMODguODI4LDI4My41NjljLTkuMjIxLDUuNDktMTQuNTIxLDE2Ljg2OC0xNC41MjEsMjUuMjg3djE2MS4yODkNCgkJCWMwLDguNDQ2LDYuOTI4LDE1LjMyMywxNS4zNDgsMTUuMzIzaDg3LjM5OWM4LjQyMSwwLDE1LjMyMS02Ljg3NSwxNS4zMjEtMTUuMzIzVjMzMi45NzJjMC04LjQzNyw2Ljg4OC0xNS4zMjEsMTUuMzYxLTE1LjMyMQ0KCQkJaDk5LjE3NWM4LjQzNSwwLDE1LjM1LDYuODg3LDE1LjM1LDE1LjMyMXYxMzcuMTc0YzAsOC40NDcsNi44NzIsMTUuMzIzLDE1LjMyMSwxNS4zMjNoODQuNzQ2YzguNDQ2LDAsMTUuMzc2LTYuODc0LDE1LjM3Ni0xNS4zMjMNCgkJCVYzMDguODMyYzAtOC40NDUtNS4zMDMtMTkuODI1LTExLjY1OC0yNS4zMTNMMjY3LjY0NiwxNDcuNzM2eiIvPg0KCQk8cGF0aCBkPSJNNTAwLjgxNCwyMjkuODQ1bC02MS45NTMtNTMuMzk1VjczLjg3NGMwLTguNDI5LTYuODU5LTE1LjMxMy0xNS4zMS0xNS4zMTNoLTM5LjMyOGMtOC40NDQsMC0xNS4zMSw2Ljg4NS0xNS4zMSwxNS4zMTMNCgkJCXY0Mi4yMzhsLTkyLjA4Ni03OS4zOThjLTExLjgzLTEwLjcyNi0yOS43OS0xMC43MjYtNDEuNzAyLDBMMTEuMTQsMjI5Ljg0NWMtMTIuNjQ0LDExLjUyOS0xMy42MDMsMzEuMTQ1LTIuMDkyLDQzLjgxMw0KCQkJYzYuMDc2LDYuNzY5LDI5LjQwNSwxNi41NDYsNDMuODA3LDIuMTMyTDI1NS45OSwxMDEuNTg0bDIwMy4xNjIsMTc0LjE3OWMxMi42MzIsMTEuNTIyLDMyLjIyOSwxMC41NzYsNDMuODA3LTIuMTA0DQoJCQlDNTE0LjQ2OSwyNjAuOTg4LDUxMy41MSwyNDEuMzc0LDUwMC44MTQsMjI5Ljg0NXoiLz4NCgk8L2c+DQo8L2c+DQo8ZyBpZD0iQ2FscXVlXzIiPg0KCTxnPg0KCQk8dGV4dCB0cmFuc2Zvcm09Im1hdHJpeCgxIDAgMCAxIDEuNDE4IDM1NC4zMDgzKSIgZm9udC1mYW1pbHk9IidNeXJpYWRQcm8tUmVndWxhciciIGZvbnQtc2l6ZT0iMzM0LjI2NTkiPi88L3RleHQ+DQoJCTxwYXRoIGQ9Ik0yMjcuOTQ4LDMxOC41NTVjMCwyMy42MTMtMTkuMTQsNDIuNzYyLTQyLjc3Myw0Mi43NjJjLTIzLjYyMywwLTQyLjc2My0xOS4xNDgtNDIuNzYzLTQyLjc2Mg0KCQkJYzAtMjMuNjEyLDE5LjE0LTQyLjc2Myw0Mi43NjMtNDIuNzYzQzIwOC44MDgsMjc1Ljc5MywyMjcuOTQ4LDI5NC45NDMsMjI3Ljk0OCwzMTguNTU1eiIvPg0KCQk8cGF0aCBkPSJNMzY5LjkxMywzMTguNTM0YzAsMjMuNjM1LTE5LjE1LDQyLjc2Mi00Mi43ODUsNDIuNzYyYy0yMy42MzQsMC00Mi43NjMtMTkuMTI3LTQyLjc2My00Mi43NjINCgkJCWMwLTIzLjYzNCwxOS4xMjktNDIuNzY0LDQyLjc2My00Mi43NjRDMzUwLjc2MywyNzUuNzcsMzY5LjkxMywyOTQuOSwzNjkuOTEzLDMxOC41MzR6Ii8+DQoJCTxwYXRoIGQ9Ik01MTEuODksMzE4LjUzNGMwLDIzLjYzNS0xOS4xNSw0Mi43NjItNDIuNzYzLDQyLjc2MmMtMjMuNjEzLDAtNDIuNzY0LTE5LjEyNy00Mi43NjQtNDIuNzYyDQoJCQljMC0yMy42MzQsMTkuMTUtNDIuNzY0LDQyLjc2NC00Mi43NjRDNDkyLjczOSwyNzUuNzcsNTExLjg5LDI5NC45LDUxMS44OSwzMTguNTM0eiIvPg0KCTwvZz4NCjwvZz4NCjwvc3ZnPg0K);
  background-size: 50px 50px;
  background-position: center;
  background-repeat: no-repeat;
  fill: red; // not working
}

最佳答案

您在 :after 上设置填充,而不是在 SVG 上,要控制 svg,您需要将其添加为图像元素,然后通过 css 定位它

关于css - 将填充颜色更改为 SVG,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35865324/

上一篇:javascript - Twitter Bootstrap 模式背景不会消失

下一篇:css - 使用::after 添加超过 1 个内容?

相关文章:

html - Wordpress主页底部的空白

javascript - three.js:使用 textureloader 加载 svg 从 r78 开始不起作用

javascript - 防止 Svg 文本重叠

javascript - 运行 npm run compile :sass returns error: npm ERR! 缺少脚本:compile:sass

css - 如何在面板上添加竖线?

css - 在 css 内容中使用图标字体

css - 顶部菜单 Bootstrap 居中(SmartAdmin 模板)

css - 如何使用 laravel-snappy 将打印友好的 laravel View 导出为 PDF

html - 从 jQuery UI 获取高亮彩色图标作为元素符号?

javascript - 通过添加和拖动动态点(闪烁)进行多边形奇怪的重绘