Import an SVG file using JavaScript and then animate it with CSS

Question

I want to import a SVG file using JavaScript and animate the graphic with CSS. I'm able to import the file but

cursor: pointer

doesn't work and I'm not able to access the SVG graphics attributes like fill or totalPathLenght. Where is the problem and how can I solve it?

I tried importing the SVG like this:

const myGraphic = document.createElement("object");
myGraphic.data = "mySVG.svg";
document.body.appendChild(myGraphic);

I also tried the same thing using iframe and embed

You can't change styles of an ` – herrstrietzel Nov 03 '22 at 13:48 — herrstrietzel, Nov 03 '22 at 13:48

score 0 · Answer 1 · answered Nov 03 '22 at 13:18

0

A good explanation on how to do this can be found here, I'll paraphrase and adapt it for what you are asking:

const svgElement = document.getElementById("svg");
const checkboxElement = document.getElementById("check");

checkboxElement.addEventListener("change", e => {
  svgElement.style.fill = e.target.checked ? "PeachPuff" : "PapayaWhip";
});

#svg {
  /* An example of how to set the cursor */
  cursor: pointer;
}

<input type="checkbox" id="check" />
<svg id="svg" fill="AliceBlue">
  <circle r="50" cx="70" cy="70" />
</svg>

answered Nov 03 '22 at 13:18

Aaron Meese

1,670
3
22
32

Thanks for your help, but i wanted to import a already existing SVG using JavaScript. – Marko Miklas Nov 03 '22 at 14:04
@MarkoMiklas it's the exact same premise, I just can't give you a demo without access to your image. – Aaron Meese Nov 03 '22 at 14:41

Import an SVG file using JavaScript and then animate it with CSS

1 Answers1