【问题标题】：Can't find <path> element by its id [duplicate]无法通过 id 找到 <path> 元素 [重复]
【发布时间】：2019-04-24 11:37:42
【问题描述】：

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

这是路径元素：

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

路径元素位于 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。

【问题讨论】：

我建议您阅读此内容：stackoverflow.com/questions/14376732/…。首先将ID 添加到您的对象标签中，然后您必须等待它加载才能查询它们的元素。
@D.Smania 我也试过了，返回同样的错误：Cannot read property 'getElementById' of null at HTMLObjectElement.<anonymous>。

标签： javascript jquery html css svg

【解决方案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)。

【讨论】：

或使用 JQuery 放置：$("#element").css("fill", "blue"); at document ready...
这不起作用，但我得到了这个错误：Uncaught TypeError: Cannot read property 'style' of null at HTMLDocument.
@D.Smania 我也试过了，好像没用。没有输出任何错误，但没有任何反应。
@connexo 你错了。通常，<path> 确实同时具有 fill 属性和 fill 样式属性，但 SVG 路径对象没有绑定到 fill 属性的 fill 属性。这就是为什么path.fill 会返回undefined。如果你使用path.getAttribute("fill")，但没有设置这个属性，它会返回null。
@strahinja 您是否尝试在控制台上记录元素，检查它是否正确，以及可用的属性？做console.log($("#element"));.