如何更改 SVG 中的背景颜色？答案

【问题标题】：How to change background color in SVG?如何更改 SVG 中的背景颜色？
【发布时间】：2022-01-07 11:46:09
【问题描述】：

如何将 SVG 图像更改为具有背景颜色 #ff3400 和引号颜色为 #ffffff ？这是 HTML：

<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="508.044px" height="508.044px" viewBox="0 0 508.044 508.044" style="enable-background:new 0 0 508.044 508.044;" xml:space="preserve">
    <g>
        <g>
            <path d="M0.108,352.536c0,66.794,54.144,120.938,120.937,120.938c66.794,0,120.938-54.144,120.938-120.938
            s-54.144-120.937-120.938-120.937c-13.727,0-26.867,2.393-39.168,6.61C109.093,82.118,230.814-18.543,117.979,64.303
            C-7.138,156.17-0.026,348.84,0.114,352.371C0.114,352.426,0.108,352.475,0.108,352.536z" />
            <path d="M266.169,352.536c0,66.794,54.144,120.938,120.938,120.938s120.938-54.144,120.938-120.938S453.9,231.599,387.106,231.599
            c-13.728,0-26.867,2.393-39.168,6.61C375.154,82.118,496.875-18.543,384.04,64.303C258.923,156.17,266.034,348.84,266.175,352.371
            C266.175,352.426,266.169,352.475,266.169,352.536z" />
        </g>
    </g>
</svg>

【问题讨论】：

到目前为止你尝试过什么？您可能想查看 svg 标签的样式和填充属性。
您可以向其中一个组添加填充属性以填充白色引号。对于 svg 元素的背景，您可以使用 css 或者您可以绘制一个与 svg 画布一样大的矩形并用所需的颜色填充 ti

标签： html svg

【解决方案1】：

使用 css 设置 svg 背景的样式：

编辑：背景是#ff3400，使用css，前景是#ffffff，通过在svg中设置fill。

svg {
  background: #ff3400;
}

<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="508.044px" height="508.044px" viewBox="0 0 508.044 508.044" fill="#ffffff" xml:space="preserve">
    <g>
        <g>
            <path d="M0.108,352.536c0,66.794,54.144,120.938,120.937,120.938c66.794,0,120.938-54.144,120.938-120.938
            s-54.144-120.937-120.938-120.937c-13.727,0-26.867,2.393-39.168,6.61C109.093,82.118,230.814-18.543,117.979,64.303
            C-7.138,156.17-0.026,348.84,0.114,352.371C0.114,352.426,0.108,352.475,0.108,352.536z" />
            <path d="M266.169,352.536c0,66.794,54.144,120.938,120.938,120.938s120.938-54.144,120.938-120.938S453.9,231.599,387.106,231.599
            c-13.728,0-26.867,2.393-39.168,6.61C375.154,82.118,496.875-18.543,384.04,64.303C258.923,156.17,266.034,348.84,266.175,352.371
            C266.175,352.426,266.169,352.475,266.169,352.536z" />
        </g>
    </g>
</svg>

【讨论】：

【解决方案2】：

您可以使用内联样式或在 HTML 中添加样式标签。

内联：

<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="508.044px" height="508.044px" viewBox="0 0 508.044 508.044" style="background-color:#ff3400;enable-background:new 0 0 508.044 508.044;" xml:space="preserve">
    <g>
        <g>
            <path style="fill:#fff;" d="M0.108,352.536c0,66.794,54.144,120.938,120.937,120.938c66.794,0,120.938-54.144,120.938-120.938
            s-54.144-120.937-120.938-120.937c-13.727,0-26.867,2.393-39.168,6.61C109.093,82.118,230.814-18.543,117.979,64.303
            C-7.138,156.17-0.026,348.84,0.114,352.371C0.114,352.426,0.108,352.475,0.108,352.536z" />
            <path style="fill:#fff;" d="M266.169,352.536c0,66.794,54.144,120.938,120.938,120.938s120.938-54.144,120.938-120.938S453.9,231.599,387.106,231.599
            c-13.728,0-26.867,2.393-39.168,6.61C375.154,82.118,496.875-18.543,384.04,64.303C258.923,156.17,266.034,348.84,266.175,352.371
            C266.175,352.426,266.169,352.475,266.169,352.536z" />
        </g>
    </g>
</svg>

或者，如果您将 SVG 直接嵌入到 HTML 中而不是作为外部文件引用，则可以使用样式标记。

样式标签：

<style>
    svg  { background-color:#ff3400 }
    path { fill:#fff; }
</style>

【讨论】：

重要的附带条件：这仅适用于您的 SVG 内联在 HTML 文档中。对于外部 SVG，它将不起作用。

【解决方案3】：

您所要做的就是在 SVG 中设置背景颜色，并选择所有 SVG 路径并设置填充颜色。喜欢：

svg{ /* select the SVG */
   backgorund-color: #ff3400;
}
   
svg path{ /* select the paths */
   fill: #ffffff;
}

【讨论】：

使用内部或外部 CSS 并删除 svg 标签中的宽度和 SVG 高度以便更好地使用。