svg 蒙版

嘴对嘴编程

已于 2024-04-28 15:00:02 修改

阅读量579

点赞数 16

分类专栏： svg 文章标签：前端

于 2024-04-12 09:16:35 首次发布

本文链接：https://blog.youkuaiyun.com/u011703959/article/details/137666175

版权

svg 专栏收录该内容

1 篇文章

订阅专栏

svg 蒙版

蒙版用mask声明蒙版不影响事件响应蒙版白色为不透明，越黑越不透明 blank属性无效


      <body>
            <div style="width: 200px; height: 200px;margin: 0 auto;">

                  <svg width="200" height="200" viewBox="0 0 200 200">

                        <rect x="0" y="0" width="100" height="100" mask="url(#msk)" fill="#8da5c7" stroke="red"
                              stroke-width="1" onclick="javascript:alert(123)"></rect>

                        <mask id="msk">
                              <circle cx="30" cy="30" r="30" fill="#666"></circle>
                              <rect x=0 y=0 width="30" height="30" fill="#a000a0">
                                    </circle>

                        </mask>
                  </svg>
            </div>
      </body>