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>");
}

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>

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

1 个答案: