我有这个:
<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:让它工作。按照 Robert Longson 的建议修改了这个:
$(document).ready(function() {....})
为此:
a.addEventListener("load", function() {...}, false);
JQuery:
$("#btn").on('click', function() {...}
最佳答案
$(document).ready();
在解析器完成该页面的 DOM 之后，但在所有嵌入对象初始化之前，一旦 Web 浏览器运行就会触发。如果您想尽快执行 JavaScript，这很有用，但在您的情况下这不是您想要的。我想它是在 DOMContentLoaded 上实现的与 ready() description 匹配的事件
您需要 UA 加载 <object>内容以便对其进行操作。您可以附加到 <object>元素加载事件或您对页面加载所做的操作。
关于javascript - 使用 JQuery 更改 SVG 中的元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16823007/