CODEWITHSUNDEEP
javascripthtmlsvgsvg.js
theredboy
theredboy

Reputation: 102

Why I cannot reach the svg objects using from html object?

Example on the Internet, they can call objects in svg files easily. But i cannot reach them. Here is my html code``

<html lang="en">
<head>
<title>SVG Example</title>
    <script src="mysvg.js"></script>
</head>
<body>
    <div>
        <button style="width: 100px; height: 50px" onclick="changeColor()">Change Color</button>
        <object data="test.svg" type="image/svg+xml"></object>
    </div>
</body>
</html>

This is my .js file code:

function changeColor() {
  const svg = document.getElementById("layer1");
  const motor1 = document.getElementById("g320");
  const ellipse = document.getElementById("ellipse205");
  ellipse.setAttribute("style","fill:green;stroke:green;stroke-width:2");
  motor1.appendChild(svg);
  ellipse.appendChild(motor1);
}

What i do wrong, why this is not working? I do not understand.

Upvotes: 0

Views: 1006

Answers (1)

ccprog
ccprog

Reputation: 21811

The content of a SVG <object> is part of a different DOM than the host document. Accessing it is a two-step process:

Like this:

document.querySelector('object[data="test.svg"]').addEventListener("load", function () {
    document.querySelector('button').addEventListener("click", changeColor);
}

function changeColor() {
    const innerDocument = this.contentDocument;
    const svg = innerDocument.getElementById("layer1");
    const motor1 = innerDocument.getElementById("g320");
    const ellipse = innerDocument.getElementById("ellipse205");
    ellipse.setAttribute("style","fill:green;stroke:green;stroke-width:2");
    motor1.appendChild(svg);
    ellipse.appendChild(motor1);
}

Note that this sort of access is subject to the Same-origin Policy. It means that the host HTML file and the SVG either need to be served from the same domain, or from localhost, or a CORS header must explicitely allow it. If you load them with the file:// protocol, this.contentDocument will also return null.

Upvotes: 2

Related Questions