码迷,mamicode.com
首页 > 其他好文 > 详细

svg蒙版mask

时间:2020-01-19 13:01:31      阅读:187      评论:0      收藏:0      [点我收藏+]

标签:mask   style   形状   efs   svg   pre   不可   back   col   

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

标签:mask   style   形状   efs   svg   pre   不可   back   col   

原文地址:https://www.cnblogs.com/-outman/p/12213181.html

(0)
(1)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!