使用JQuery更改SVG中的元素

Question

我有這個：

<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() { works，但是

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

......沒有。 這是為什么？

編輯：添加更多代碼

編輯＃2：讓它發揮作用。 跟隨Robert Longson的建議並改變了這個：

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

對此：

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

JQuery的：

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

Answer 1

$(document).ready();

在解析器完成該頁面的DOM之后，但在初始化所有嵌入對象之前，Web瀏覽器運行后將立即觸發。 如果您想盡快執行JavaScript，這很有用，但這不是您想要的。 我想它是在DOMContentLoaded事件中實現的，因為它匹配ready（）描述

您需要UA加載<object>內容才能操作它。 您可以附加到<object>元素onload事件，也可以附加到頁面onload上。

使用JQuery更改SVG中的元素

問題描述

1 個解決方案

解決方案1
2 已采納 2013-05-29 21:29:50

使用JQuery更改SVG中的元素

問題描述

1 個解決方案

解決方案1 2 已采納 2013-05-29 21:29:50

解決方案1
2 已采納 2013-05-29 21:29:50