我如何在 css 中的 img 上使用 svg 路径？

Question

所以我希望我的图像是一个斑点形状，这是我的代码

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 路径不是我复制的代码它在粘贴时不断变化，我不知道该怎么做但我复制了一个路径但是它粘贴了另一个无效的代码，就像你在我的代码中看到的路径不是我复制的代码

Answer 1

所以问题出在 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)" />

此代码的路径无效，但在原始 code/file 中没有问题当您尝试复制它时问题就开始了，原因是它突出了太多字符，如果您将每次复制的字符限制为 50 个字符，则可以防止它中断，我不知道是什么导致这可能是 windows 剪贴板或其他东西中的错误，但这是我找到的防止此问题的解决方案

我如何在 css 中的 img 上使用 svg 路径？

How can i use svg path on an img in css?

html

css

svg