CSSSVGClip路徑有問題-不作業-有解無憂

我有一個剪輯路徑 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');
}

uj5u.com熱心網友回復：

作為一種簡單的解決方法，您也可以mask-image改用：

復制完整的掩碼/blob svg（包括具有 viewBox 屬性的 paent svg）。
將 svg 轉換為 data-url （例如，通過 Yoksel 的 SVG URL-encoder ）

示例 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,");
  -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 class="picture">
  <img class="imgMask" src="https://placekitten.com/g/300/300" alt="" />
</div>

不幸的是，您將需要一些供應商前綴（例如-webkit-mask-image）來提供最佳兼容性。

示例 2：使用剪輯路徑：

顯示代碼片段

.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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/435409.html

標籤：css 谷歌浏览器剪辑路径

上一篇：當我在密碼輸入上重置::placeholder的樣式時，它會在Chrome和Safari瀏覽器上變成點

下一篇：如何在HList上撰寫異構串列？