SVG 覆盖我的背景颜色答案

【问题标题】：SVG override my background colorSVG 覆盖我的背景颜色
【发布时间】：2015-10-01 22:20:42
【问题描述】：

我想知道如何“在”背景上使用 SVG？不要使用 SVG“作为”背景。

我的 div 带有带有背景颜色的 css 代码。但是当我导入 SVG 时，它的背景变成了白色。 SVG 会覆盖背景颜色吗？

有什么方法可以在不影响背景但保持 SVG 形状的情况下导入它？

    background: -webkit-linear-gradient( #EAFEFF, #DFF3FF);
background: -moz-linear-gradient( #EAFEFF, #DFF3FF);
border: 1px solid #000;
 -webkit-border-radius:10px;
-moz-border-radius: 10px;
border-radius: 10px;
background-image: url(SVG/revenue_icon.svg), none;
background-size: 100%;
width: 92%;
height: 92%;
margin: 1px 1px;

SVG：

    <?xml version="1.0" encoding="utf-8"?>
<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"
     viewBox="0 0 150 150" style="enable-background:new 0 0 150 150;" xml:space="preserve">
<style type="text/css">
    .st0{fill:#05415B;} 
</style>
<g id="XMLID_94_">
    <path id="XMLID_122_" class="st0" d="M102.1,32.7H47.9c-4,0-7.2,3.2-7.2,7.2v70.1c0,4,3.2,7.2,7.2,7.2h54.2c4,0,7.2-3.2,7.2-7.2
        V39.9C109.3,36,106.1,32.7,102.1,32.7z M75.1,101.1L61.5,76.2l7.7-0.2V48.9h12.7v26.9l8-0.2L75.1,101.1z"/>
</g>
</svg>

提前谢谢你

【问题讨论】：

我猜你的 SVG 中有一些东西添加了白色背景，比如 fill 属性，fill="#FFFFFF"。
这是可移动的，还是只是我制作的一个糟糕的 SVG 文件？因为如果我没记错 SVG 是线条。所以他们应该有任何背景
似乎有填充物。但如果我将其更改为无，它仍然具有相同的背景

标签： javascript html css svg background-image

【解决方案1】：

(background)css 中的渐变被视为背景图像 (css-tricks)，因此您在此处覆盖渐变，背景图像：url(SVG/revenue_icon.svg)，无；

你可以这样做：

.container::after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(SVG/revenue_icon.svg) no-repeat;
}

【讨论】：

它有效。既然你提到了它，我只是注意到我在匆忙中用 SVG 覆盖了同一个类中的背景。新手错误。