svg蒙版mask

Posted -outman

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了svg蒙版mask相关的知识,希望对你有一定的参考价值。

mask的形状,fill黑色可见,白色不可见。

<svg width="400" height="300">
  <defs>
      <mask id="small-rect">
          <rect x="0" y="0" width="400" height="300" fill="white"></rect>
          <rect width="100" height="100" fill="black" x="200" y="100"></rect>
      </mask>
  </defs>
  <rect id="back" x="0" y="0" width="400" height="300" fill="#d4fcff"></rect>
  <rect id="front" x="0" y="0" width="400" height="300" fill="#fcd3db" mask="url(#small-rect)"></rect>
</svg>

以上是关于svg蒙版mask的主要内容,如果未能解决你的问题,请参考以下文章

SVG 模式作为剪贴蒙版

SVG图形引用裁切蒙版

使用 mask 属性屏蔽 UIImageView 后添加蒙版边框

MUI 框架之遮罩蒙版(mask)

如何计算Mask Rcnn中对象的单个蒙版区域

带有 png 文件的掩码图像