使用 SVG FIlter 圆整剪辑路径的多个实例的问题

Question

我正在尝试使用 SVG 过滤器在图像上创建圆角剪切路径，如本博客文章中所述：“如何在使用 css 剪切路径多边形时制作圆角”。

因此，这是 html 代码

<div class="box_parent">
    <div class="box2"></div>
    <svg class="flt_svg" xmlns="http://www.w3.org/2000/svg">
        <defs>
            <filter id="flt_tag">
                <feGaussianBlur in="SourceGraphic" stdDeviation="8" result="blur" />    
                <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9" result="flt_tag" />
                <feComposite in="SourceGraphic" in2="flt_tag" operator="atop"/>
            </filter>
        </defs>
    </svg>
</div>

以及随附的 CSS

@media only screen and (max-width: 600px) {
  .box2 {
    width: 100%;
    background-image: url("image1url");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #faebd7;
    clip-path: polygon( 0% 0%, 77% 0%, 77% 44%, 100% 44%, 100% 100%, 81% 100%, 81% 72%, 0 73%);
    margin: 0 auto;
  }
}
.flt_svg {
  visibility: hidden;
  position: absolute;
  width: 0px;
  height: 0px;
}

.box_parent {
  filter: url("#flt_tag");
}

我的情况是，我将在一个页面上创建多个这些，但如果我复制而不更改类名并且仅更改 IMAGE_URL，则两个框都会显示相同的图像。 如果我更改类名以使其完全不同，则不会有输出

我尝试为类名的每个引用赋予不同的类名 i-e

<div class="3box_parent">
    <div class="box3"></div>

    <svg class="3flt_svg" xmlns="http://www.w3.org/2000/svg">
        <defs>
            <filter id="3flt_tag">
                <feGaussianBlur in="SourceGraphic" stdDeviation="8" result="blur" />    
                <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9" result="flt_tag" />
                <feComposite in="SourceGraphic" in2="3flt_tag" operator="atop"/>
            </filter>
        </defs>
    </svg>

</div>

然后在CSS中像这样

@media only screen and (max-width: 600px) {
  .3box2 {
    width: 100%;
    background-image: url("image2url");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #faebd7;
    clip-path: polygon(0% 0%, 77% 0%, 77% 44%, 100% 44%, 100% 100%, 81% 100%, 81% 72%, 0 73%);
    margin: 0 auto;
  }
  .3flt_svg {
    visibility: hidden;
    position: absolute;
    width: 0px;
    height: 0px;
  }
}

.3box_parent {
  filter: url("#3flt_tag");
}  

Answer 1

最好避免类名或 ID 以数字开头

来自 W3C 规范

在 CSS 中，标识符（包括元素名称、类和 ID） 选择器）只能包含字符 [a-zA-Z0-9] 和 ISO 10646 字符 U+00A0 及更高字符，加上连字符 (-) 和下划线 (_);它们不能以数字、两个连字符或后跟一个连字符开头 按一位数字。标识符还可以包含转义字符和任何 ISO 10646 字符作为数字代码（请参阅下一项）。例如， 标识符“黑白？”可以写成“B&W？”或“B W F”。

它们可以使用一些转义：但你应该选择像

box-i

这样的后缀

此外，您只需定义 SVG 圆角过滤器（也称为“goo/gooey 过滤器”）一次 - 确保过滤器 ID 不被其他内联 SVG 资源使用。

/* actually not neeeded as the SVG doesn't contain any rendered elements */
.flt_svg {
  visibility: hidden;
  position: absolute;
  width: 0px;
  height: 0px;
}

/* apply "goo" filter for rounded corners */
.box_parent {
    filter: url("#flt_tag");
}


.clipped {
  width: 100%;
  aspect-ratio:1;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  clip-path: polygon(
    0% 0%,
    77% 0%,
    77% 44%,
    100% 44%,
    100% 100%,
    81% 100%,
    81% 72%,
    0 73%
  );
  margin: 0 auto;
}

/* image 1 */
.box1{
    background-image: url("https://picsum.photos/id/237/1000/1000");
}

/* image 2 */
.box2{
    background-image: url("https://picsum.photos/id/238/1000/1000");
}

/* image 3 */
.box3{
    background-image: url("https://picsum.photos/id/235/1000/1000");
}

<div class="box_parent">
  <div class="clipped box1"></div>
  <div class="clipped box2"></div>
  <div class="clipped box3"></div>
</div>

<!-- define ronded cornder filter -->
<svg class="flt_svg">
  <defs>
    <filter id="flt_tag">
      <feGaussianBlur in="SourceGraphic" stdDeviation="8" result="blur" />
      <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9" result="flt_tag" />
      <feComposite in="SourceGraphic" in2="flt_tag" operator="atop" />
    </filter>
  </defs>
</svg>

请记住背景图像没有内在尺寸：
在上面的示例中，我通过

aspect-ratio

添加了隐式高度。您也可以同时指定

width

和

height

属性。

坦率地说，您应该使用考虑

<img>

元素来获得更多功能，例如

alt

属性以实现更好的可访问性或

srcset

响应图像的功能。

.img-clipped {
  width:100%;
  object-fit:cover;
  clip-path: polygon(
    0% 0%,
    77% 0%,
    77% 44%,
    100% 44%,
    100% 100%,
    81% 100%,
    81% 72%,
    0 73%
  );
  margin: 0 auto;
}


/* round-clip */
.clip-rounded{
  filter: url("#flt_tag");
}

<div class="clip-rounded">
  <img class="img-clipped" src="https://picsum.photos/id/237/1200/1200" alt="image">
</div>

<div class="clip-rounded">
  <img class="img-clipped" src="https://picsum.photos/id/236/1600/900" alt="image">
</div>

<div class="clip-rounded">
  <img class="img-clipped" src="https://picsum.photos/id/234/2400/900" alt="image">
</div>

<!-- define ronded corner filter -->
<svg class="flt_svg">
  <defs>
    <filter id="flt_tag">
      <feGaussianBlur in="SourceGraphic" stdDeviation="8" result="blur" />
      <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9" result="flt_tag" />
      <feComposite in="SourceGraphic" in2="flt_tag" operator="atop" />
    </filter>
  </defs>
</svg>

但是，我们还需要一个环绕元素来应用 SVG 圆角过滤器。

进一步阅读

• “粘稠过滤器”