CSS SVG 剪辑路径问题 - 不工作

Question

剪辑路径有问题css。当我将剪辑路径放在我的 css 填充上时，图像不会显示...我在 chrome 上。所以你有什么想法吗？

我用这个生成器https://10015.io/tools/svg-blob-generator

.card .content .picture img {
    width: 100%;
    height: 100%;
    border-radius:50%;
    border: 1px solid #fff;
    backdrop-filter: blur(10px);
    box-shadow: 0 0 4px 2px #fff;
    clip-path: path('M317.5,327.5Q297,415,179.5,392.5Q62,370,103.5,270.5Q145,171,210,151.5Q275,132,306.5,186Q338,240,317.5,327.5Z');
}

Answer 1

作为一种简单的解决方法，您还可以使用 mask-image:

复制完整的 mask/blob svg（包括带有 viewBox 属性的父 svg）。
将 svg 转换为 data-url （例如，通过 Yoksel 的 URL-encoder for SVG )

示例 1：css mask-image（作为数据内联的剪辑路径 url）

svg {
  display: inline-block;
  width: 10em;
}

.picture {
  border: 1px solid #ccc;
  width: 500px;
  height: auto;
  aspect-ratio: 1/1;
  resize: horizontal;
  overflow: auto;
}

.imgMask {
  object-fit: cover;
  width: 100%;
  height: 100%;
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 480 480' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' %3E%3Cpath fill='%23474bff' d='M465.5,291Q452,342,416,379Q380,416,335.5,439Q291,462,239.5,464Q188,466,144,440.5Q100,415,62.5,379Q25,343,13.5,291.5Q2,240,16,189.5Q30,139,61.5,97.5Q93,56,141,36Q189,16,239,20.5Q289,25,334,45.5Q379,66,412,103.5Q445,141,462,190.5Q479,240,465.5,291Z' /%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 480 480' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' %3E%3Cpath fill='%23474bff' d='M465.5,291Q452,342,416,379Q380,416,335.5,439Q291,462,239.5,464Q188,466,144,440.5Q100,415,62.5,379Q25,343,13.5,291.5Q2,240,16,189.5Q30,139,61.5,97.5Q93,56,141,36Q189,16,239,20.5Q289,25,334,45.5Q379,66,412,103.5Q445,141,462,190.5Q479,240,465.5,291Z' /%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}

<div class="picture">
  <img class="imgMask" src="https://placekitten.com/g/300/300" alt="" />
</div>

不幸的是，您将需要一些 vendor-prefixes（例如 -webkit-mask-image）来提供最佳兼容性。
那些必需的前缀属性也会“膨胀”您的 css 文件大小（尽管在使用相当轻量级的 svg 代码或仅几个 mask-images 时可以忽略不计）。

示例 2：使用 clip-path:

.picture {
  height: auto;
  aspect-ratio: 1/1;
}

.resize{
  width: 500px;
  resize: horizontal;
  overflow: auto;
  border: 1px solid #ccc;
}

.img{
  aspect-ratio:1/1;
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.imgClip {
  aspect-ratio: 1/1;
  -webkit-clip-path: url(#my-clip-path);
  clip-path: url(#my-clip-path);
}

.clipPath{
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden
}

<h3>Clip-path </h3>
<div class="resize">
  <img class="img imgClip " src="https://placekitten.com/g/300/300" alt="" />
</div>
<!--hidden clip path svg-->
<svg class="clipPath">
  <!-- scale path to fit a 1x1 viewBox: 1/480 = 0.002 -->
  <clipPath id="my-clip-path" clipPathUnits="objectBoundingBox" transform="scale(0.002 0.002)"><path fill="#474bff" d="M465.5,291Q452,342,416,379Q380,416,335.5,439Q291,462,239.5,464Q188,466,144,440.5Q100,415,62.5,379Q25,343,13.5,291.5Q2,240,16,189.5Q30,139,61.5,97.5Q93,56,141,36Q189,16,239,20.5Q289,25,334,45.5Q379,66,412,103.5Q445,141,462,190.5Q479,240,465.5,291Z" />
  </clipPath>
</svg>

进一步阅读：关于clip-path注意事项和陷阱

Eric Meyer: Scaling SVG Clipping Paths for CSS Use
Css-tricks: Unfortunately, clip-path: path() is Still a No-Go
Css-tricks: Clipping and Masking in CSS

剪辑路径助手

Convert SVG absolute clip-path to relative

CSS SVG 剪辑路径问题 - 不工作

Problem with CSS SVG Clip path - not working

css

google-chrome

clip-path

示例 1：css mask-image（作为数据内联的剪辑路径 url）

示例 2：使用 clip-path:

进一步阅读：关于clip-path注意事项和陷阱

剪辑路径助手