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

Question

我正在尝试反转SVG图像，使透明背景变为纯色，然后原始实体路径变为透明元素。我想要达到效果的效果非常类似于此应用栏右侧的图标：

我试图通过创建一个矩形然后使用原始路径作为clipPath来实现这一点，但我还没能让SVG标记为我工作。

有谁知道一种简单的技术来实现这种效果？我正在尝试对此SVG图像执行此效果 - http://thenounproject.com/noun/tracking-location/#icon-No2108

非常感谢任何帮助。

更新 - 尝试掩码：

原始图片：（Tracking Location由名词项目的Friedrich Santana设计）

<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">
    <path fill="#000000" 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" />
</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的菜鸟，我确信我可能做的事情很简单！

Answer 1

您可以使用svg过滤器执行此操作，可以看到类似（跟踪大纲）示例here。

另一个替代方案是使用掩码，例如，参见w3c testcase这个简单的例子。

但是如果你的形状很简单，那么只需保持“其他”形状以便于切换（使用例如display属性切换），可能会更好（性能方面）。或者使用stroke-width属性和<use>两次绘制相同的形状（将填充放在描边形状的顶部）。

Answer 2

可以使用的一个方法是使用适当的填充规则在路径内创建孔的子路径。路径是圆形，子路径是创建图标形状的孔的图标。填充路径，洞仍将显示背景。创建一个带填充的单独图标，当您需要实心图标时将使用该图标。查看免费http://commons.oreilly.com/wiki/index.php/SVG_Essentials/Paths并查找子路径和填充规则。有关使用两个圆弧创建圆的精彩解决方案，请参阅https://stackoverflow.com/a/10477334，因为圆圈不能包含子路径。这是一个例子：

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