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

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

CodePudding user response：

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

CodePudding user response：

We Can Add On img Tag inside

HTML:

<img src="logo.svg" alt="Logo" >

CSS:

.logo-img path {
    fill: #000;
}

The above svg loads and is natively fill: #fff but when I use the above css to try change it to black it doesn't change, this is my first time playing with SVG and I am not sure why it's not working.

you reference of this link you got answer. this link have answer, you change of some line of code

https://www.sitepoint.com/css-path-function-squeaky-portraits/