index.html

Question

我的目标是在加载页面时更改fill元素的<path>属性。

这是路径元素：

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

path元素位于map.svg文件内部，我将SVG加载到html文件中，并带有一个<object>元素，因为我已经看到了this的答案，所以我决定使用<object>元素。

index.html

这是HTML文件：

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

这是我的JavaScript文件：

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

执行后，路径填充不会改变。因此，我尝试对其进行调试，我放入了console.log($("#element").attr("fill"));，看它返回了什么，然后它返回了undefined。

Answer 1

代替

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

您应该尝试以下操作：

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

因为您已经显示，该元素没有fill attribute ，但是没有fill style 。

在此之后，您的第二个问题是预期的问题：console.log($("#element").attr("fill"));。它没有属性fill，因此它返回undefined。而是尝试console.log(element.style.fill)。

无法通过其ID查找<path>元素

index.html

main.js

1 个答案: