使用CSS在SVG元素上设置背景图片是否可行？

Question

是否可以使用CSS针对background-image中的SVG进行定位？

.color {
   background-color: #fff;
   color: #fff;
}

.svg {
   background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 43'><path class='color' d='M 55.584673,43.175632 36.75281,22.967243 0,43.175632 40.42403,0 59.71135,20.208389 96,0 Z' /></svg>");
}

- Karai17

---

是的，这是可能的，但您需要确保不会破坏CSS语法，例如未引用的符号。您还可以使用base64编码来处理图像。 - Flying

你能给我展示一个例子吗？我之前尝试过这个，但好像没有成功。 - Karai17

@Flying，答案在下面。 - isherwood

除非您将CSS放在背景图像本身中，否则无法使用CSS定位背景图像。 - Robert Longson

Answer 1

您的代码如下所示可以正常工作。但是，如果您的SVG包含与放置SVG图像在url()中使用的相同引号，则可能会遇到问题。它们需要像\"一样被引用或替换。您还可以考虑使用base64编码对SVG图像进行编码，但这将使您的CSS文件大小更大。

svg {
  background-color: lightgrey;
}
.color {
   fill: blue;
}

.svg-plain {
   background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 43'><path class='color' d='M 55.584673,43.175632 36.75281,22.967243 0,43.175632 40.42403,0 59.71135,20.208389 96,0 Z' /></svg>");
}

.svg-base64 {
   background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCA5NiA0Myc+PHBhdGggY2xhc3M9J2NvbG9yJyBkPSdNIDU1LjU4NDY3Myw0My4xNzU2MzIgMzYuNzUyODEsMjIuOTY3MjQzIDAsNDMuMTc1NjMyIDQwLjQyNDAzLDAgNTkuNzExMzUsMjAuMjA4Mzg5IDk2LDAgWicgLz48L3N2Zz4=")
}

.svg, svg {
  width: 100px; 
  height: 100px;
  background-position: center;
  background-repeat: no-repeat;
  background-color: lightgrey;
  margin: 5px;
}

<div class="svg svg-plain"></div>
<div class="svg svg-base64"></div>
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 43'><path class='color' d='M 55.584673,43.175632 36.75281,22.967243 0,43.175632 40.42403,0 59.71135,20.208389 96,0 Z' /></svg>

- Flying

---

这似乎没有做我想要的事情。我希望实际的SVG路径被着色，而不仅仅是背景。 - Karai17

@Karai17 抱歉，你的问题不够清楚... 这也是可能的，但在这种情况下，您需要将 CSS 直接嵌入 SVG（如果您将其插入为 <img> 或 <object>），或者您需要将 SVG 直接插入到 HTML 页面作为一部分。 - Flying

那么如果SVG是背景图像，就没有办法对其进行样式设置了吗？ - Karai17

不可以，因为在这种情况下它被视为图像，而不是具有自己内部结构的东西。 - Flying