这是一个在矩形内显示圆形区域的简单 fiddle https://jsfiddle.net/3v6yhf0m/
svg {
border: 3px dashed #999;
}
svg > rect:hover {
fill: green;
}
<svg width="120" height="120" xmlns="http://www.w3.org/2000/svg">
<defs>
<clipPath id="myClip">
<circle cx="30" cy="30" r="20"/>
</clipPath>
</defs>
<rect x="10" y="10" width="100" height="100" fill="blue"
clip-path="url(#myClip)"/>
</svg>
但我想使用 clip-path 查看位于圆外的矩形区域 https://jsfiddle.net/yhbeevya/
svg {
border: 3px dashed #999;background-color:blue;fill:blue;
}
svg > rect:hover {
fill: green;
}
<svg width="120" height="120" xmlns="http://www.w3.org/2000/svg">
<defs>
<clipPath id="myClip">
<circle cx="30" cy="30" r="20"/>
</clipPath>
</defs>
<rect x="10" y="10" width="100" height="100" fill="white"
clip-path="url(#myClip)"/>
</svg>
请分享你的想法
最佳答案
改用面具。面具的黑色部分显示背景,白色显示形状本身。
svg {
border: 3px dashed #999;background-color:blue;fill:blue;
}
svg > rect:hover {
fill: green;
}
<svg width="120" height="120" xmlns="http://www.w3.org/2000/svg">
<defs>
<mask id="myMask">
<rect width="100%" height="100%" fill="white"/>
<circle cx="30" cy="30" r="20" fill="black"/>
</mask>
</defs>
<rect x="10" y="10" width="100" height="100" fill="white"
mask="url(#myMask)"/>
</svg>
关于html - 查看 clip-path 的反区域,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44106814/