反转SVG片段(仅显示外部路径) [英] invert SVG clip (show only outside path)
本文介绍了反转SVG片段(仅显示外部路径)的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
是否可以使用SVG反转剪辑的动作?在下面的示例中,我想显示两个圆圈之间而不是圆圈内部的路径:
Is it possible to invert the action of a clip with SVG? In the example below I would like to show the path between the two circles rather than inside the circles:
<svg xmlns="http://www.w3.org/2000/svg" width="985" height="740">
<g>
<clipPath id="re8-clip" clip-rule="nonzero">
<rect id="sa11" x="763.0" y="176.5" width="70.0" height="25.0" rx="50" ry="50" fill="ForestGreen"/>
<rect id="sa12" x="516.0" y="127.5" width="70.0" height="25.0" rx="50" ry="50" fill="ForestGreen"/>
</clipPath>
<rect id="sa11" x="763.0" y="176.5" width="70.0" height="25.0" rx="50" ry="50" fill="ForestGreen"/>
<rect id="sa12" x="516.0" y="127.5" width="70.0" height="25.0" rx="50" ry="50" fill="ForestGreen"/>
</g>
<path stroke="Black" stroke-width="1.5" fill="none" d="M 798.0 189.0 551.0 140.0" clip-path="url(#re8-clip)"/>
</svg>
推荐答案
按照Duopixel注释中的链接,可以使用mask
解决问题:
Following the link in Duopixel's comment, the problem can be solved using a mask
:
<svg width="50%" height="50%" viewbox="0 0 985 740" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">
<defs>
<rect id="sa11" x="763.0" y="176.5" width="70.0" height="25.0" rx="50" ry="50" />
<rect id="sa12" x="516.0" y="127.5" width="70.0" height="25.0" rx="50" ry="50" />
</defs>
<mask id="re8-clip">
<rect id="bg" x="0" y="0" width="100%" height="100%" fill="white"/>
<use xlink:href="#sa11" fill="Black" />
<use xlink:href="#sa12" fill="Black" />
</mask>
<use xlink:href="#sa11" fill="ForestGreen" />
<use xlink:href="#sa12" fill="ForestGreen" />
<path stroke="Black" stroke-width="1.5" fill="none" d="M 798.0 189.0 551.0 140.0" mask="url(#re8-clip)"/>
</svg>
作为未成年人,有人知道面具是否可能默认为白色,所以不需要'bg'矩形吗?
As a minor aside, does anybody know if it is possible for a mask to default to white, so the 'bg' rectangle is not necessary?
这篇关于反转SVG片段(仅显示外部路径)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文