I am aiming to dynamically change the fill attribute of a specific <path> element when a page loads.
Here is the detailed information about 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"/>
This <path> element resides within a map.svg file that I embed in my HTML using an <object> tag, as suggested by a helpful reply on StackOverflow.
index.html
Below is the content of 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
Here is an excerpt from my JavaScript file:
$(document).ready(function () {
$("#element").attr("fill", "blue");
});
Upon execution, the fill color of the path does not change as expected. To troubleshoot this issue, I included
console.log($("#element").attr("fill"));undefined.