Question

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

＆＃13;

svg {
  border: 3px dashed #999;
}
svg > rect:hover {
  fill: green;
}

＆＃13;

<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>

＆＃13;

但我想使用clip-path查看位于圆圈外面的矩形区域 https://jsfiddle.net/yhbeevya/

＆＃13;

svg {
  border: 3px dashed #999;background-color:blue;fill:blue;
}
svg > rect:hover {
  fill: green;
}

＆＃13;

<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>

＆＃13;

请分享您的想法

Answer 1

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

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>

查看剪辑路径的反向区域

1 个答案: