3

我正在尝试反转 SVG 图像，使透明背景变成纯色，然后原来的纯色路径变成透明元素。效果我试图达到的效果很像这个应用栏右边的图标： 在此处输入图像描述

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

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

任何帮助是极大的赞赏。

更新 - 尝试面具：

原图：（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 的菜鸟，我确信我可能做错了一些非常简单的事情！

4

2 回答 2

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>
于 2013-06-24T19:16:04.473 回答
2

您可以使用 svg 过滤器执行此操作，可以在此处看到类似的（跟踪轮廓）示例。

另一种选择是使用掩码，例如这个w3c 测试用例是一个简单的例子。

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

于 2013-06-24T08:24:14.993 回答