SVG 反转颜色
SVG Invert Colors
所以，我正在尝试制作一个 Reactjs 网站
(I am a beginner)
我正在使用 SVG 图片作为徽标。我最近把我网站的底色变成了黑色，我再也看不到我的图标了……（这是基于 Udemy 课程）
我试过下载其他白色的 SVG 图片，但它不会显示在应用程序上。我也尝试过修改 HTML5 SVG 代码，但最终失败了。我也试过自己制作一个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">
<g>
<path style="fill:#010002" 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 style="fill:#010002" 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 style="fill:#010002" 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 style="fill:#010002" 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 style="fill:#010002" 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>
<g/>
<g/>
<g/>
<g/>
<g/>
<g/>
<g/>
<g/>
<g/>
<g/>
<g/>
<g/>
<g/>
<g/>
<g/>
</svg>
我想将此 SVG 图像轮廓变为白色，将图像内部变为黑色。请帮忙。 （可能只是修改 HTML5 SVG 代码？我不想实现其他文件来产生所需的结果）
SVG 很容易理解。您在每个路径元素中都看到这些“填充：#010002”-Thingys 了吗？如果你想把整个内部变成白色，把它们变成“填充：#ffffff”。您需要的可能是如下所示的“stroke”-属性。如果这对您来说太细了，还可以添加带有简单数字的“笔画宽度”作为值。
<?xml version="1.0" encoding="iso-8859-1"?>
<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">
<g>
<path style="fill:#010002; stroke:#ffffff" 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 style="fill:#010002; stroke:#ffffff" 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 style="fill:#010002; stroke:#ffffff" 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 style="fill:#010002; stroke:#ffffff" 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 style="fill:#010002; stroke:#ffffff"
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>
您甚至可以删除所有内联定义，只设置组元素的样式，将其变成：
<g style="fill:#010002; stroke:#ffffff; stroke-width: 4">
这是图标填充变为白色且 svg 背景设置为黑色的代码段：
<svg style="background-color:black" 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">
<g>
<path style="fill:#FFFFFF" 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 style="fill:#FFFFFF" 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 style="fill:#FFFFFF" 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 style="fill:#FFFFFF" 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 style="fill:#FFFFFF" 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>
<g/>
<g/>
<g/>
<g/>
<g/>
<g/>
<g/>
<g/>
<g/>
<g/>
<g/>
<g/>
<g/>
<g/>
<g/>
</svg>
请注意，您甚至可能不需要将 SVG 上的背景颜色设置为黑色，因为背景是透明的，如果您的网站已经是黑色的，您可以删除 style="background-color:black" 中的属性根 svg 标签。
所以，我正在尝试制作一个 Reactjs 网站
(I am a beginner)
我正在使用 SVG 图片作为徽标。我最近把我网站的底色变成了黑色，我再也看不到我的图标了……（这是基于 Udemy 课程）
我试过下载其他白色的 SVG 图片，但它不会显示在应用程序上。我也尝试过修改 HTML5 SVG 代码，但最终失败了。我也试过自己制作一个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">
<g>
<path style="fill:#010002" 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 style="fill:#010002" 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 style="fill:#010002" 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 style="fill:#010002" 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 style="fill:#010002" 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>
<g/>
<g/>
<g/>
<g/>
<g/>
<g/>
<g/>
<g/>
<g/>
<g/>
<g/>
<g/>
<g/>
<g/>
<g/>
</svg>
我想将此 SVG 图像轮廓变为白色，将图像内部变为黑色。请帮忙。 （可能只是修改 HTML5 SVG 代码？我不想实现其他文件来产生所需的结果）
SVG 很容易理解。您在每个路径元素中都看到这些“填充：#010002”-Thingys 了吗？如果你想把整个内部变成白色，把它们变成“填充：#ffffff”。您需要的可能是如下所示的“stroke”-属性。如果这对您来说太细了，还可以添加带有简单数字的“笔画宽度”作为值。
<?xml version="1.0" encoding="iso-8859-1"?>
<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">
<g>
<path style="fill:#010002; stroke:#ffffff" 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 style="fill:#010002; stroke:#ffffff" 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 style="fill:#010002; stroke:#ffffff" 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 style="fill:#010002; stroke:#ffffff" 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 style="fill:#010002; stroke:#ffffff"
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>
您甚至可以删除所有内联定义，只设置组元素的样式，将其变成：
<g style="fill:#010002; stroke:#ffffff; stroke-width: 4">
这是图标填充变为白色且 svg 背景设置为黑色的代码段：
<svg style="background-color:black" 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">
<g>
<path style="fill:#FFFFFF" 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 style="fill:#FFFFFF" 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 style="fill:#FFFFFF" 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 style="fill:#FFFFFF" 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 style="fill:#FFFFFF" 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>
<g/>
<g/>
<g/>
<g/>
<g/>
<g/>
<g/>
<g/>
<g/>
<g/>
<g/>
<g/>
<g/>
<g/>
<g/>
</svg>
请注意，您甚至可能不需要将 SVG 上的背景颜色设置为黑色，因为背景是透明的，如果您的网站已经是黑色的，您可以删除 style="background-color:black" 中的属性根 svg 标签。