Reactjs网站黑色背景下如何仅修改代码实现SVG图标颜色反转

解决方法 #

你当前SVG所有路径默认填充为黑色，和黑背景撞色导致无法显示，只需在现有代码基础上添加白色描边属性即可满足需求，修改后的完整代码如下：

<?xml version="1.0" encoding="iso-8859-1"?>
<!--Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)-->
<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" viewBox="0 0 407.453 407.453" style="enable-background:new 0 0 407.453 407.453" xml:space="preserve" fill="#010002" stroke="#ffffff" stroke-width="3">
  <g>
    <path d="M255.099,116.515c4.487,0,8.129-3.633,8.129-8.129c0-4.495-3.642-8.129-8.129-8.129H143.486
        c-4.487,0-8.129,3.633-8.129,8.129c0,4.495,3.642,8.129,8.129,8.129H255.099z"/>
    <path d="M367.062,100.258H311.69c-4.487,0-8.129,3.633-8.129,8.129c0,4.495,3.642,8.129,8.129,8.129h47.243
        v274.681H48.519V116.515h44.536c4.487,0,8.129-3.633,8.129-8.129c0-4.495-3.642-8.129-8.129-8.129H40.391
        c-4.487,0-8.129,3.633-8.129,8.129v290.938c0,4.495,3.642,8.129,8.129,8.129h326.671c4.487,0,8.129-3.633,8.129-8.129V108.386
        C375.191,103.891,371.557,100.258,367.062,100.258z"/>
    <path d="M282.59,134.796c4.487,0,8.129-3.633,8.129-8.129V67.394C290.718,30.238,250.604,0,201.101,0
        c-49.308,0-89.414,30.238-89.414,67.394v59.274c0,4.495,3.642,8.129,8.129,8.129s8.129-3.633,8.129-8.129V67.394
        c0-28.198,32.823-51.137,73.36-51.137c40.334,0,73.157,22.939,73.157,51.137v59.274
        C274.461,131.163,278.095,134.796,282.59,134.796z"/>
    <path d="M98.892,147.566c0,11.526,9.389,20.907,20.923,20.907c11.534,0,20.923-9.38,20.923-20.907
        c0-4.495-3.642-8.129-8.129-8.129s-8.129,3.633-8.129,8.129c0,2.561-2.089,4.65-4.666,4.65c-2.569,0-4.666-2.089-4.666-4.65
        c0-4.495-3.642-8.129-8.129-8.129S98.892,143.071,98.892,147.566z"/>
    <path d="M282.59,168.473c11.534,0,20.923-9.38,20.923-20.907c0-4.495-3.642-8.129-8.129-8.129
        c-4.487,0-8.129,3.633-8.129,8.129c0,2.561-2.089,4.65-4.666,4.65c-2.577,0-4.666-2.089-4.666-4.65
        c0-4.495-3.642-8.129-8.129-8.129c-4.487,0-8.129,3.633-8.129,8.129C261.667,159.092,271.055,168.473,282.59,168.473z"/>
  </g>
</svg>

修改说明 #

我直接在<svg>根标签上新增了3个全局属性，不用逐个修改内部path，效率更高：

• fill="#010002" 保留你原本的黑色内部填充
• stroke="#ffffff" 把轮廓设置为纯白色
• stroke-width="3" 控制白色轮廓的粗细，你可以根据实际显示效果调整这个数值，数值越大轮廓越粗

如果觉得黑色填充和背景融合度太高，想要仅保留白色轮廓效果，把fill属性值改为transparent即可。修改后的代码可以直接放到React项目中使用，不需要引入任何外部资源。

内容的提问来源于stack exchange，提问作者user13821103