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

Question

如何将 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>

Answer 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>

Answer 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>

Answer 3

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

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

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

How to change background color in SVG?

html

svg