如何在css中的img上使用svg路徑？-有解無憂

所以我希望我的影像是一個blob的形狀，這是我的代碼

root{
  --blob: "M43.1,-67.8C56.1,-58.7,67,-8BQAzQwVETtFWGmAFZjAwNSYA7M4EczfocpPa2kZ6AiC1tVQuAhJTRjLG5Nkk4QqFWHxiKBdi6RuUFjC5zMhvhUyK7tatMA,56.1C5.8,55,-4.8,53.8,-18.3,53.8C-31.8,53.7,-4JUdGzvrMFDWrUUwY3toJATSeNwjn54LkCnKBPRzDuhzi5vSepHfUckJNxRL2gjkNrSqtCoRUrEDAgRwsQvVCjZbRyFTLRNyDmT1a1boZV2,-54.4,-53.1,-40.1,-61.7C-25.7,-70.2,-12.9,-80.4,1.1,-82C15,-83.7,30.1,-76.9,43.1,-67.8Z";

}

.img-class{
  clip-path: path(var(--blob));
  overflow: hidden;
}

<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
    <path fill="#E8B224" d="M43.1,-67.8C56.1,-58.7,67,-8BQAzQwVETtFWGmAFZjAwNSYA7M4EczfocpPa2kZ6AiC1tVQuAhJTRjLG5Nkk4QqFWHxiKBdi6RuUFjC5zMhvhUyK7tatMA,56.1C5.8,55,-4.8,53.8,-18.3,53.8C-31.8,53.7,-4JUdGzvrMFDWrUUwY3toJATSeNwjn54LkCnKBPRzDuhzi5vSepHfUckJNxRL2gjkNrSqtCoRUrEDAgRwsQvVCjZbRyFTLRNyDmT1a1boZV2,-54.4,-53.1,-40.1,-61.7C-25.7,-70.2,-12.9,-80.4,1.1,-82C15,-83.7,30.1,-76.9,43.1,-67.8Z" transform="translate(100 100)" />
</svg>

<div class="img-class">
        <img src="img/img1.jpg" alt="img" />
</div>

但它不起作用，我不知道出了什么問題，我看過一個關于它的教程，這正是他們所做的。

更新：所以我有點發現它為什么不渲染，這是因為 SVG 路徑不是我復制的代碼，當我粘貼它時它會不斷變化，我不知道該怎么做，但我復制了一個路徑，但它粘貼了另一個代碼無效，就像您在我的代碼中看到的路徑不是我復制的代碼

uj5u.com熱心網友回復：

所以問題是SVG代碼本身

<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<path fill="#E8B224" d="M43.1,-67.8C56.1,-58.7,67,-8BQAzQwVETtFWGmAFZjAwNSYA7M4EczfocpPa2kZ6AiC1tVQuAhJTRjLG5Nkk4QqFWHxiKBdi6RuUFjC5zMhvhUyK7tatMA,56.1C5.8,55,-4.8,53.8,-18.3,53.8C-31.8,53.7,-4JUdGzvrMFDWrUUwY3toJATSeNwjn54LkCnKBPRzDuhzi5vSepHfUckJNxRL2gjkNrSqtCoRUrEDAgRwsQvVCjZbRyFTLRNyDmT1a1boZV2,-54.4,-53.1,-40.1,-61.7C-25.7,-70.2,-12.9,-80.4,1.1,-82C15,-83.7,30.1,-76.9,43.1,-67.8Z" transform="translate(100 100)" />

此代碼有一個無效的路徑，在原始代碼/檔案中沒有問題，當您嘗試復制它時問題就開始了，原因是它的字符太多，如果您將要復制的字符限制為每個 50 個字符時間，您可以防止它損壞，我不知道是什么原因造成的，這可能是 Windows 剪貼板中的錯誤或其他問題，但這是我找到的防止此問題的解決方案

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

標籤：html css svg

上一篇：如何創建ReactSVG組件？

下一篇：我想將影像放入svg形狀并隱藏溢位部分