如何更改 SVG 图像中的背景颜色？
How to change background colour in an SVG image?
这是一个 SVG 图像示例，我需要将背景颜色从当前的白色更改为透明（或黑色）。
到目前为止我只能改变前景色。
<svg xmlns:sketch="http://www.bohemiancoding.com/sketch/ns" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" viewBox="5 5 90 90" version="1.1" x="0px" y="0px" id="svg14" sodipodi:docname="icon_link.svg" inkscape:version="0.92.1 r15371">
<metadata
id="metadata20">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
</cc:Work>
</rdf:RDF>
</metadata>
<defs
id="defs18" />
<sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="787"
inkscape:window-height="620"
id="namedview16"
showgrid="false"
inkscape:zoom="1.888"
inkscape:cx="50"
inkscape:cy="62.5"
inkscape:window-x="262"
inkscape:window-y="18"
inkscape:window-maximized="0"
inkscape:current-layer="svg14" />
<title
id="title2">1</title>
<desc
id="desc4">Created with Sketch.</desc>
<g
stroke="none"
stroke-width="1"
fill="none"
fill-rule="evenodd"
sketch:type="MSPage"
id="g8"
style="fill:#ff0000">
<path
d="M72.6749171,46.3009857 L27.3261728,46.3009857 L27.3261728,53.9297668 L72.6749171,53.9297668 L72.6749171,46.3009857 Z M84.6466542,29 L63.3361992,29 C57.6266014,29 52.9828534,33.6448379 52.9828534,39.3533458 L52.9828534,41.9416822 L60.6116345,41.9416822 L60.6116345,39.3533458 C60.6116345,37.8504759 61.8333293,36.6287811 63.3361992,36.6287811 L84.6466542,36.6287811 C86.1495241,36.6287811 87.3712189,37.8504759 87.3712189,39.3533458 L87.3712189,60.8774067 C87.3712189,62.3802766 86.1495241,63.6019714 84.6466542,63.6019714 L63.3361992,63.6019714 C61.8333293,63.6019714 60.6116345,62.3802766 60.6116345,60.8774067 L60.6116345,58.2890703 L52.9828534,58.2890703 L52.9828534,60.8774067 C52.9828534,66.5859146 57.6266014,71.2307525 63.3361992,71.2307525 L84.6466542,71.2307525 C90.3551621,71.2307525 95,66.5859146 95,60.8774067 L95,39.3533458 C95,33.6448379 90.3551621,29 84.6466542,29 L84.6466542,29 Z M39.3894553,58.2890703 L47.0182364,58.2890703 L47.0182364,60.8774067 C47.0182364,66.5859146 42.3733986,71.2307525 36.6648907,71.2307525 L15.3533458,71.2307525 C9.64483786,71.2307525 5,66.5859146 5,60.8774067 L5,39.3533458 C5,33.6448379 9.64483786,29 15.3533458,29 L36.6648907,29 C42.3733986,29 47.0182364,33.6448379 47.0182364,39.3533458 L47.0182364,41.9416822 L39.3894553,41.9416822 L39.3894553,39.3533458 C39.3894553,37.8504759 38.1677605,36.6287811 36.6648907,36.6287811 L15.3533458,36.6287811 C13.8504759,36.6287811 12.6287811,37.8504759 12.6287811,39.3533458 L12.6287811,60.8774067 C12.6287811,62.3802766 13.8504759,63.6019714 15.3533458,63.6019714 L36.6648907,63.6019714 C38.1677605,63.6019714 39.3894553,62.3802766 39.3894553,60.8774067 L39.3894553,58.2890703 Z"
fill="none"
sketch:type="MSShapeGroup"
id="path6"
style="fill:#ffff00"
/>
</g>
</svg>
尝试修改 pagecolor 但没有成功。
我该怎么做，可能不使用 CSS？
试试这个
将 style="background-color: #000;" 内联添加到 <svg>
查看演示here
Inkscape 往往会生成非常臃肿的文件。这是为您准备的清理版本：
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 90 90">
<defs>
<mask id="chain">
<rect x="4" y="28" width="34" height="34" fill="black" stroke="white" stroke-width="7" rx="7" />
<rect x="52" y="28" width="34" height="34" fill="black" stroke="white" stroke-width="7" rx="7" />
<rect x="21" y="39" width="48" height="12" fill="white" stroke="black" stroke-width="4" />
</mask>
</defs>
<!-- Uncomment this for manual background -->
<!--rect fill="#000" width="90" height="90" /-->
<rect fill="#ff0" width="90" height="90" mask="url(#chain)" />
</svg>
您会注意到，这不仅比您的文件小得多，而且更容易看到发生了什么：我使用了两个圆角正方形和一个矩形 link，使用蒙版剪出形状。然后，使用形状作为遮罩来填充您的颜色以获得结果。
这没有定义背景颜色。如果用作图像文件，它将透明以显示其背后的任何背景。或者您可以取消注释指定的行以在图标上强制使用背景。
这是一个 SVG 图像示例，我需要将背景颜色从当前的白色更改为透明（或黑色）。
到目前为止我只能改变前景色。
<svg xmlns:sketch="http://www.bohemiancoding.com/sketch/ns" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" viewBox="5 5 90 90" version="1.1" x="0px" y="0px" id="svg14" sodipodi:docname="icon_link.svg" inkscape:version="0.92.1 r15371">
<metadata
id="metadata20">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
</cc:Work>
</rdf:RDF>
</metadata>
<defs
id="defs18" />
<sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="787"
inkscape:window-height="620"
id="namedview16"
showgrid="false"
inkscape:zoom="1.888"
inkscape:cx="50"
inkscape:cy="62.5"
inkscape:window-x="262"
inkscape:window-y="18"
inkscape:window-maximized="0"
inkscape:current-layer="svg14" />
<title
id="title2">1</title>
<desc
id="desc4">Created with Sketch.</desc>
<g
stroke="none"
stroke-width="1"
fill="none"
fill-rule="evenodd"
sketch:type="MSPage"
id="g8"
style="fill:#ff0000">
<path
d="M72.6749171,46.3009857 L27.3261728,46.3009857 L27.3261728,53.9297668 L72.6749171,53.9297668 L72.6749171,46.3009857 Z M84.6466542,29 L63.3361992,29 C57.6266014,29 52.9828534,33.6448379 52.9828534,39.3533458 L52.9828534,41.9416822 L60.6116345,41.9416822 L60.6116345,39.3533458 C60.6116345,37.8504759 61.8333293,36.6287811 63.3361992,36.6287811 L84.6466542,36.6287811 C86.1495241,36.6287811 87.3712189,37.8504759 87.3712189,39.3533458 L87.3712189,60.8774067 C87.3712189,62.3802766 86.1495241,63.6019714 84.6466542,63.6019714 L63.3361992,63.6019714 C61.8333293,63.6019714 60.6116345,62.3802766 60.6116345,60.8774067 L60.6116345,58.2890703 L52.9828534,58.2890703 L52.9828534,60.8774067 C52.9828534,66.5859146 57.6266014,71.2307525 63.3361992,71.2307525 L84.6466542,71.2307525 C90.3551621,71.2307525 95,66.5859146 95,60.8774067 L95,39.3533458 C95,33.6448379 90.3551621,29 84.6466542,29 L84.6466542,29 Z M39.3894553,58.2890703 L47.0182364,58.2890703 L47.0182364,60.8774067 C47.0182364,66.5859146 42.3733986,71.2307525 36.6648907,71.2307525 L15.3533458,71.2307525 C9.64483786,71.2307525 5,66.5859146 5,60.8774067 L5,39.3533458 C5,33.6448379 9.64483786,29 15.3533458,29 L36.6648907,29 C42.3733986,29 47.0182364,33.6448379 47.0182364,39.3533458 L47.0182364,41.9416822 L39.3894553,41.9416822 L39.3894553,39.3533458 C39.3894553,37.8504759 38.1677605,36.6287811 36.6648907,36.6287811 L15.3533458,36.6287811 C13.8504759,36.6287811 12.6287811,37.8504759 12.6287811,39.3533458 L12.6287811,60.8774067 C12.6287811,62.3802766 13.8504759,63.6019714 15.3533458,63.6019714 L36.6648907,63.6019714 C38.1677605,63.6019714 39.3894553,62.3802766 39.3894553,60.8774067 L39.3894553,58.2890703 Z"
fill="none"
sketch:type="MSShapeGroup"
id="path6"
style="fill:#ffff00"
/>
</g>
</svg>
尝试修改 pagecolor 但没有成功。
我该怎么做，可能不使用 CSS？
试试这个
将 style="background-color: #000;" 内联添加到 <svg>
查看演示here
Inkscape 往往会生成非常臃肿的文件。这是为您准备的清理版本：
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 90 90">
<defs>
<mask id="chain">
<rect x="4" y="28" width="34" height="34" fill="black" stroke="white" stroke-width="7" rx="7" />
<rect x="52" y="28" width="34" height="34" fill="black" stroke="white" stroke-width="7" rx="7" />
<rect x="21" y="39" width="48" height="12" fill="white" stroke="black" stroke-width="4" />
</mask>
</defs>
<!-- Uncomment this for manual background -->
<!--rect fill="#000" width="90" height="90" /-->
<rect fill="#ff0" width="90" height="90" mask="url(#chain)" />
</svg>
您会注意到，这不仅比您的文件小得多，而且更容易看到发生了什么：我使用了两个圆角正方形和一个矩形 link，使用蒙版剪出形状。然后，使用形状作为遮罩来填充您的颜色以获得结果。
这没有定义背景颜色。如果用作图像文件，它将透明以显示其背后的任何背景。或者您可以取消注释指定的行以在图标上强制使用背景。