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

so I want my image to be a shape of a blob and this is my code

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>

but it doesn't work and I don't know what's wrong, I've seen a tutorial about it and this is exactly what they did.

update: so I kinda found out why it's not rendering, it's cus the SVG path is not the code I copied it keeps changing when I paste it, I don't know what to do but I copy a path but it pastes another code which is invalid, like the path you're seeing in my codes is not the code I copied

htmlcsssvg


Solution 1:[1]

so the problem is the SVG code itself

<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)" />

this code has an invalid path which is alright in the raw code/file the problem begins when you try to copy it, and the reason for that is its juts too many characters, if you limit the characters you are copying to like 50 characters each time, you can prevent it from breaking, I don't know what is causing this maybe its a bug in windows clipboard or something but this is the solution I found to prevent this problem

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Arsen kho

Related Questions