SVG 文档中的 getElementById

Question

我写了一个这样的 svg 文件：

 <?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="1280pt" height="650pt" viewBox="0 0 1280 650" id="svg1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"><script xlink:href="pathToPolyline.js"/><script><![CDATA[

alert(document);//returns [object SVG document]

//and tried

var path=document.getElementById('path1');//the problem line

alert(path);

]]></script>
<path id="path1" fill="#000000" d=" M 0.00 0.00 L 1280.00 0.00 L 1280.00 449.99 C 1276.46 444.19 1270.19 441.08 1265.59 436.31 C 1264.17 429.73 1265.36 422.91 1266.42 416.36 C 1267.19 413.43 1264.94 410.65 1262.45 409.42 C 1255.44 405.63 1247.99 402.68 12 .....

如评论行 alert(document); 警报 [object SVG document] 。

但：

 var path=document.getElementById('path1');
alert(path);

警报 null 。

我还尝试将 svg 放在 html 页面中，也在 xhtml 页面中，尝试了更多但现在没有结果。

任何想法？

原文由 merveotesi 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

在您调用 var path=document.getElementById('path1'); 时， path1 尚未定义（稍后会出现）。

您应该将代码放在路径定义之后。

但是我不确定您是否可以将 <script> 标签放在 <svg> 中。

原文由 pimvdb 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

只是为了补充 pimvdb 的答案：

您可以在 SVG 中使用脚本标签： http://www.w3.org/TR/SVG11/script.html

此外，您可以将 jQuery 1.2.6 与纯 SVG 文档一起 使用，或者如果您使用的是带有嵌入式 SVG 的 HTML 文档，则可以使用任何版本的 jQuery。在这种情况下，您可以将脚本标记放在任何您喜欢的地方，然后使用 jquery 的 $(document).ready 方法在加载文档后运行脚本。

原文由 jbeard4 发布，翻译遵循 CC BY-SA 3.0 许可协议