I have a problem with a clip path css. When I put clip path on my css fill, image wont show... I m on chrome. So you have any idea ?

I use this generator 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');
}

CodePudding user response：

As an easy workaround you might also use mask-image instead:

1. Copy the complete mask/blob svg (including the paent svg with viewBox attribute).
2. convert the svg to a data-url (e.g. via Yoksel's URL-encoder for SVG )

Example 1: css mask-image (clip path inlined as data 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,");
  -webkit-mask-image: url("data:image/svg xml,");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}

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

Unfortunately you will need some vendor-prefixes (e.g. -webkit-mask-image) to provide the best compatibility.

Example 2: using 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 >
  <img  src="https://placekitten.com/g/300/300" alt="" />
</div>
<!--hidden clip path svg-->
<svg >
  <!-- 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>