Can't find element by its id

Question

My goal is to change a fill attribute of a <path> element, upon the loading of a page.

This is the path element:

<path xmlns="http://www.w3.org/2000/svg" 
style="fill:#ff0000;stroke:#000000;stroke-width:0.26458332px;stroke- 
linecap:butt;stroke-linejoin:miter;stroke-opacity:1;fill-opacity:1" 
d="M 71.895501,10.754349 94.88068,-28.80154 112.52047,12.892505 Z"
id="element"/>

The path element is located inside of a map.svg file, I load the SVG in my html file, with a <object> element, since I've seen this answer, I decided to use <object> element.

index.html

This is the HTML file:

<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
        <meta charset="utf-8">
        <title>Dental Ordination</title>
        <script src="svg.min.js"></script>
        <script src="jquery.min.js"></script>
    </head>
    <body>
        <object type="image/svg+xml" data="map.svg"/>
        <script src="main.js"></script>
    </body>
</html>

main.js

And this is my JavaScript file:

$(document).ready(function () {
    $("#element").attr("fill", "blue");
});

When executed, paths fill doesn't change. So I tried to debug it, I've put console.log($("#element").attr("fill"));, to see what it returns, and it returned undefined.

I suggest you to read this: https://stackoverflow.com/questions/14376732/work-with-elements-from-embed-or-object-tag. First add an `ID` to your object tag, and then you have to wait it to load before querying they elements. — Shidersz, Nov 21 '18 at 21:09
@D.Smania I've tried that too, returns the same error: `Cannot read property 'getElementById' of null at HTMLObjectElement.`. — strahinja, Nov 21 '18 at 21:34

score 0 · Answer 1 · answered Nov 21 '18 at 20:23

0

Instead of

$(document).ready(function () {
    $("#element").attr("fill", "blue");
});

you should try the following:

document.addEventListener('DOMContentLoaded', function() {
  document.getElementById('element').style.fill = 'blue';
})

because as you've shown, the element doesn't have a fill attribute, but a fill style.

Following this, your secondary question is what is expected: console.log($("#element").attr("fill"));. It does not have an attribute fill, so it returns undefined. Instead try console.log(element.style.fill).

answered Nov 21 '18 at 20:23

connexo

53,704
14
91
128

or with JQuery place this: `$("#element").css("fill", "blue");` at document ready... – Shidersz Nov 21 '18 at 20:36
That did not work, but I got this error though: Uncaught TypeError: Cannot read property 'style' of null at HTMLDocument. – strahinja Nov 21 '18 at 20:41
@D.Smania I tried that too, doesn't seem to work. No errors were outputted, but nothing happens. – strahinja Nov 21 '18 at 20:42
@connexo You're wrong. In general, a `` does have both `fill` attribute and `fill` style property, but an SVG path object doesn't have a `fill` property bounded to the `fill` attribute. That's why `path.fill` would return `undefined`. If you use `path.getAttribute("fill")`, but this attribute is not set, it'd return `null`. – klenium Nov 21 '18 at 20:43
@strahinja Have you tried to log the element on the console, to check if it is right, and the property availables? Do `console.log($("#element"));`. – Shidersz Nov 21 '18 at 20:46
@D.Smania Yes, yes I did. The output was an object, more precisly w.fn.init {} – strahinja Nov 21 '18 at 20:49
@D.Smania It is not right. You would search for `#element` in the HTML's document, not in the SVG's own space. Check my flag comment and the linked question. – klenium Nov 21 '18 at 20:49
@klenium I just tried that solution, and that didn't do the work for me. It broke at `var element = svgDoc.getElementById("element");`. The error is: `Cannot read property 'getElementById' of null at HTMLObjectElement.`. – strahinja Nov 21 '18 at 21:00
@strahinja does your object element have id="element" it doesn't in your question? Did you add that? – Robert Longson Nov 21 '18 at 21:06
@RobertLongson It does, i tried the other solution after I posted the question. I did exactly everything that solution has. The solution that got my answer flagged. – strahinja Nov 21 '18 at 21:11
`document.getElementById('element').style.fill='blue'`this worked on plain svg object – chars Apr 13 '21 at 21:41

Can't find element by its id

index.html

main.js

1 Answers1