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

Question

我正在尝试反转 SVG 图像，以便透明背景变为纯色，然后原始实心路径变为透明元素。我试图实现的效果非常类似于此应用栏右侧的图标:


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

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

任何帮助是极大的赞赏。

更新 - 尝试掩码:

原图:(Tracking Location 由 The Noun Project 的 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属性(property)和<use>用于绘制相同的形状两次(将填充放在描边形状的顶部)。