将填充颜色更改为SVG

Question

我想更改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
}

Answer 1

你正在设置填充：不在SVG之后，控制svg你需要将它添加为图像元素，然后通过css定位