使用 JQuery 更改 SVG 中的元素答案

【问题标题】：Changing elements in SVG using JQuery使用 JQuery 更改 SVG 中的元素
【发布时间】：2013-05-29 20:13:33
【问题描述】：

我有这个：

<button type="button" id="btn" value="Release">Click Here!</button>     
...

<body>
<object data="books.svg" type="image/svg+xml" id="svg" width="1300" height="700"></object>
</body>

<script>
var a = document.getElementById("svg");
var svgDoc

a.addEventListener("load", function() {
     svgDoc = a.contentDocument;
}, false);

$(window).load(function() {
    console.log($(svgDoc).find("#book1").attr("fill"))
});

$(document).ready(function() {
    $("#btn").click(function() {
        console.log("You are here")
        $(svgDoc).find("#book1").attr("fill","#000000")
    })
})

$(window).load(function() { 有效，但是

$(document).ready(function() {
        $("#btn").click(function() {

... 没有。这是为什么呢？

编辑：添加更多代码

编辑#2：让它工作。听从罗伯特朗森的建议并改变了这一点：

$(document).ready(function() {....})

到这里：

a.addEventListener("load", function() {...}, false);

jQuery：

$("#btn").on('click', function() {...}

【问题讨论】：

在设置fill 属性后执行console.log($(svgDoc).find("#book1").attr("fill")) 会发生什么？
您遇到错误了吗？
尝试将; 添加到click 函数以及$(document).ready 的末尾？
没有错误。在控制台上打印出：#BDCDD1
@ckpepper02 没用

标签： javascript jquery html web-applications svg

【解决方案1】：

$(document).ready();

在解析器处理完该页面的 DOM 之后，但在初始化所有嵌入对象之前，将在 Web 浏览器运行时立即触发。如果您想尽快执行 JavaScript，这很有用，但这不是您想要的。我想它是在DOMContentLoaded 事件中实现的，因为它与ready() description 匹配

您需要 UA 加载 <object> 内容才能对其进行操作。您可以附加到 <object> 元素 onload 事件，或者您正在执行的页面 onload。

【讨论】：

我需要能够持续使用该功能，而不仅仅是在加载时。
我不确定我是否理解，您可以在加载事件触发后随时访问和修改<object> 的内容。
为什么 '$(document).ready(function() { $("#btn").click(function() {...' 不起作用？我点击按钮后我查看显示的 svg 文件。
books.svg 长什么样子？
不，你已经在问题中添加了一些有用的东西，以防其他人遇到这个问题，所以现在每个人都很好。