查看剪辑路径的反向区域

Posted 2023-02-25

【中文标题】查看剪辑路径的反向区域

【英文标题】：View the inverse region of clip-path

【发布时间】：2017-05-22 07:18:01

【问题描述】：

这是一个简单的小提琴，在一个矩形内显​​示一个圆形区域 https://jsfiddle.net/3v6yhf0m/

svg 
  border: 3px dashed #999;

svg > rect:hover 
  fill: green;

<svg   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"   fill="blue"
      clip-path="url(#myClip)"/>
</svg>

但我想使用剪辑路径查看位于圆外的矩形区域 https://jsfiddle.net/yhbeevya/

svg 
  border: 3px dashed #999;background-color:blue;fill:blue;

svg > rect:hover 
  fill: green;

<svg   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"   fill="white"
      clip-path="url(#myClip)"/>
</svg>

请分享你的想法

【参考方案1】：

改用面具。蒙版的黑色部分显示背景，白色显示形状本身。

svg 
  border: 3px dashed #999;background-color:blue;fill:blue;

svg > rect:hover 
  fill: green;

<svg   xmlns="http://www.w3.org/2000/svg">
  <defs>
    <mask id="myMask">
      <rect   fill="white"/>
      <circle cx="30" cy="30" r="20" fill="black"/>
    </mask>
  </defs>

  <rect x="10" y="10"   fill="white"
      mask="url(#myMask)"/>
</svg>

【讨论】：

谢谢，我试试这个