从矩形反转SVG图像/剪辑路径

我正在尝试反转SVG图像，使透明背景变成纯色，然后原始实体路径变成透明元素。我试图实现的效果与此应用程序栏右侧的图标非常相似：

我试图通过创建一个矩形，然后使用原始路径作为clipPath来实现这一点，但我还无法使SVG标记对我起作用

有人知道一个简单的方法来达到这个效果吗？我试图在这个SVG图像上执行此效果-

非常感谢您的帮助

更新-尝试掩码：

原图：（由名词项目设计）

尝试屏蔽失败：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" width="100px" height="100px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
    <mask id="maskicon">
        <path d="M83.652,10.501c-5.7-2.106-11.986,0.472-14.641,5.788L51.357,21.52c-0.75-0.498-1.561-0.927-2.439-1.252  c-6.113-2.258-12.901,0.868-15.16,6.981c-2.227,6.027,0.785,12.699,6.726,15.052l5.5,17.864c-0.239,0.433-0.456,0.883-0.644,1.354  l-19.675,5.883c-0.664-0.409-1.377-0.762-2.138-1.043c-6.114-2.258-12.901,0.867-15.161,6.979  C6.108,79.453,9.233,86.241,15.348,88.5c5.944,2.195,12.514-0.706,14.95-6.489l19.988-5.979c0.603,0.354,1.237,0.671,1.917,0.922  c6.113,2.259,12.9-0.867,15.16-6.979c2.259-6.113-0.866-12.902-6.98-15.16c-0.005-0.002-0.011-0.004-0.016-0.006l-5.383-17.475  c0.203-0.344,0.39-0.702,0.559-1.071l17.17-5.089c0.835,0.595,1.752,1.101,2.76,1.473c6.112,2.258,12.902-0.868,15.16-6.981  C92.893,19.548,89.766,12.759,83.652,10.501z"/>
    </mask>

    <rect mask="url(#maskicon)" x="0px" y="0px" width="100px" height="100px" fill="black"/>
</svg>

---

作为SVG的noob，我肯定我可能犯了一些非常简单的错误

您可以使用svg过滤器实现这一点，可以看到一个类似的（跟踪大纲）示例

另一种替代方法是使用遮罩，请参见示例，了解一个简单的示例

---

但是如果您的形状很简单，那么最好（性能方面）只保留“其他”形状以便于切换（例如使用

display

property切换）。或者可以使用

笔划宽度

属性和

两次绘制同一形状（将填充放置在笔划形状的顶部）.

可以使用的一种方法是使用子路径在路径内使用适当的填充规则创建孔。路径是圆，子路径是创建孔的图标，该孔的形状为图标的形状。填充路径，孔仍将显示背景。创建一个单独的带有填充的图标，当您需要实心图标时将使用该图标。请参阅自由和查找子路径和填充规则。有关使用两条圆弧创建圆的奇妙解决方案，请参见，因为圆不能有子路径。以下是一个例子：

<?xml version="1.0" encoding="utf-8" ?>
<svg baseProfile="full" height="1000" version="1.1" width="900" xmlns="http://www.w3.org/2000/svg" xmlns:ev="http://www.w3.org/2001/xml-events" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<g id="defs_sq_with_hole">
<path d="M 0,0 L 100,0 L 100,100 L 0,100 L 0,0 M 50,25 L 75,75 L 25,75 L 50,25 Z" />
</g>
<g id="defs_sq_no_hole">
<path d="M0,0 100,0 100,100 0,100 0,0" />
</g>
<g id="defs_triangle">
<polyline points="50,25 75,75 25,75 50,25" />
</g>
<g id="defs_arccircle_no_hole">
<path d=" M 100, 100 m -75, 0 a 75,75 0 1,0 150,0 a 75,75 0 1,0 -150,0 " />
</g>
<g id="defs_arccircle_with_hole">
<path d=" M 100, 100 m -75, 0 a 75,75 0 1,0 150,0 a 75,75 0 1,0 -150,0 M 100,75 L 125,125 L 75,125 L 100,75 Z" />
</g>
</defs>
<rect fill="green" height="100%" width="100%" x="0" y="0" />
<use fill="white" x="20" y="20" xlink:href="#defs_sq_with_hole" stroke="black" stroke-width="2" fill-rule="evenodd"/>
<use fill="none" x="200" y="20" xlink:href="#defs_sq_no_hole" stroke="black" stroke-width="2"/>
<use fill="black" x="200" y="20" xlink:href="#defs_triangle" />
<use fill="white" x="20" y="200" xlink:href="#defs_arccircle_with_hole" stroke="black" stroke-width="2" fill-rule="evenodd"/>
<use fill="none" x="200" y="200" xlink:href="#defs_arccircle_no_hole" stroke="black" stroke-width="2"/>
<use fill="black" x="250" y="250" xlink:href="#defs_triangle" />
</svg>

干杯，埃里克-非常感谢！面具听起来可能会完全满足我的需要，看看我的一个例子。仍然没有乐趣，但我已经用我最新的尝试更新了我的问题，因为我确信我可能做了一些非常简单的错误！非常感谢Erik-非常感谢！这座桥很合适。看起来我的很多困惑都来自InkScape，因为我使用它进行测试，在您的JSFIDLE示例中，结果只是InkScape中的一个黑框。Gimp完美地呈现了svg（我需要从svg创建png）。再次感谢！谢谢你的回答-非常感谢。似乎我的问题的一部分是测试我用InkScape做的svg调整，因为它似乎不能很好地处理一些svg标记。

<?xml version="1.0" encoding="utf-8" ?>
<svg baseProfile="full" height="1000" version="1.1" width="900" xmlns="http://www.w3.org/2000/svg" xmlns:ev="http://www.w3.org/2001/xml-events" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<g id="defs_sq_with_hole">
<path d="M 0,0 L 100,0 L 100,100 L 0,100 L 0,0 M 50,25 L 75,75 L 25,75 L 50,25 Z" />
</g>
<g id="defs_sq_no_hole">
<path d="M0,0 100,0 100,100 0,100 0,0" />
</g>
<g id="defs_triangle">
<polyline points="50,25 75,75 25,75 50,25" />
</g>
<g id="defs_arccircle_no_hole">
<path d=" M 100, 100 m -75, 0 a 75,75 0 1,0 150,0 a 75,75 0 1,0 -150,0 " />
</g>
<g id="defs_arccircle_with_hole">
<path d=" M 100, 100 m -75, 0 a 75,75 0 1,0 150,0 a 75,75 0 1,0 -150,0 M 100,75 L 125,125 L 75,125 L 100,75 Z" />
</g>
</defs>
<rect fill="green" height="100%" width="100%" x="0" y="0" />
<use fill="white" x="20" y="20" xlink:href="#defs_sq_with_hole" stroke="black" stroke-width="2" fill-rule="evenodd"/>
<use fill="none" x="200" y="20" xlink:href="#defs_sq_no_hole" stroke="black" stroke-width="2"/>
<use fill="black" x="200" y="20" xlink:href="#defs_triangle" />
<use fill="white" x="20" y="200" xlink:href="#defs_arccircle_with_hole" stroke="black" stroke-width="2" fill-rule="evenodd"/>
<use fill="none" x="200" y="200" xlink:href="#defs_arccircle_no_hole" stroke="black" stroke-width="2"/>
<use fill="black" x="250" y="250" xlink:href="#defs_triangle" />
</svg>