Firefox 特性 svg mask 和clip-path的区别

最新推荐文章于 2024-08-16 20:24:29 发布

阿豪boy

最新推荐文章于 2024-08-16 20:24:29 发布

阅读量168

点赞数

文章标签： svg js css html5 html

本文链接：https://blog.csdn.net/qq_35516360/article/details/122064963

版权

原文链接: Firefox 特性 svg mask 和clip-path的区别

上一篇: 一个去中心化的免费电子书共享网站 JS解码URL和编码URL

下一篇: 监狱难题位运算和超立方体染色

效果是裁剪一张矩形图片, 对于mask来讲, 点击圆形区域和矩形区域都会触发点击事件

但是对于clip-path来讲, 只能点击圆形区域才能触发点击事件

chrome不支持在mask中使用svg, 但是clip-path和Firefox一样, 只有显示区域的点击才能触发点击事件

html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        width: 200px;
        height: 200px;
        border: 1px solid black;
        overflow: hidden;
      }

      img {
        width: 100%;
        height: 100%;
      }

      body {
        background-color: deepskyblue;
      }

      .clip-path-mask {
        clip-path: circle(100px at 100px 100px);
      }
      .svg-mask {
        /*  需要使用URL而不是id选择器 */
        mask: url("./circle.svg");
        /* mask: url(#svg-circle-mask); */
      }
    </style>
  </head>
  <body>
    <svg width="200" height="200">
      <defs>
        <mask id="svg-circle-mask">
          <circle cx="50" cy="50" r="50" fill="#000" />
        </mask>
      </defs>
    </svg>
    <div id="box1" class="box svg-mask">
      <img src="./t.jpg" class="svg-mask" alt="" />
    </div>
    <div id="box2" class="box clip-path-mask">
      <img src="./t.jpg" alt="" />
    </div>
    <script>
      const box1 = document.getElementById("box1");
      box1.addEventListener("click", () => console.log("box1"));
      const box2 = document.getElementById("box2");
      box2.addEventListener("click", () => console.log("box2"));
    </script>
  </body>
</html>

svg

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">

<circle cx="100" cy="100" r="100" stroke="black"
stroke-width="2" fill="red"/>
</svg>