主页 / 问题 / 628641
Accepted
Anton Essential
Asked:2020-02-16 20:10:37 +0800 CST2020-02-16 20:10:37 +0800 CST

如何为 ie edge 或 clip-path 制作遮罩？

  • 772

下午好，我需要为图像制作一个蒙版，但 ie edge 不理解这个属性：clip-path: polygon(0 0,100% 15%,100% 100%,0 85%); 我阅读了使用 svg 可以做什么，但我不明白如何创建对象本身，指定什么大小以及如何。面具应该是这样的： 在此处输入图像描述

css

2 个回答

  1. Best Answer

    注意clipPathUnits="objectBoundingBox"——由于这个属性，分界点相对设置：1 = 100%，.1 = 10%。

    <svg width=100% height=300>
  <defs>
    <clipPath id="clip" clipPathUnits="objectBoundingBox">
      <polygon points="0,0 1,.1 1,1 0,.9"></polygon>
    </clipPath>
  </defs>
  <image xlink:href="http://placeimg.com/500/300/any" clip-path="url(#clip)" width=500 height=300 />
</svg>

    • 2

  2. 或多或少是这样的：

    演示 JsFiddle

    body {
  background-color: #e0e0e0;
}

#image-wrapper {
  position: relative;
}

.svg-background,
.svg-image {
  clip-path: url(#clip-triangle);
}

.svg-image {
  -webkit-transition: all 0.5s ease 0.2s;
  -moz-transition: all 0.5s ease 0.2s;
  opacity: 1;
  transition: all 0.5s ease 0.2s;
}

svg.clip-svg {
  height: 250px;
  position: absolute;
  width: 250px;
}

#svg-1 {
  left: 0px;
  top: 0px;
}
    <div>
  <div id="image-wrapper">
    <svg id="svg-1" class="clip-svg">
            <rect class='svg-background' width="300" height="300" fill="#ffffff" />
            <image id="img-1" class='svg-image' width="300" height="300" xlink:href="http://25.media.tumblr.com/tumblr_m5nre6cxkQ1qbs7p5o1_r1_500.jpg" />
        </svg>
  </div>
  <svg id="svg-defs">
        <defs>
            <clipPath id="clip-triangle">
                <polygon points="0 0, 100 0, 112 13, 240 13, 240 250, -250 250"/>
            </clipPath>
        </defs>
    </svg>

    • 0

相关问题