[英]How do I select an SVG inside an `object` tag?
以下是 HTML 頁面內容的外觀。
<!DOCTYPE html>
<html>
<head>
<script src="https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<object type="image/svg+xml" data="Map-edited.svg"></object>
<script src="script.js"></script>
</body>
</html>
這是script.js外觀。
var tooltip = d3.select("body")
.append("div")
.style("position", "absolute")
.style("z-index", "10")
.style("visibility", "hidden")
.text("Hello");
var svg= d3.select("object").select("svg");
svg.selectAll('g')
.on("mouseover",function(){
return tooltip.style("visibility","visible");
})
.on("mousemove",function(){
var offset= 20;
var topPosition= (event.pageY-offset)+"px";
var leftPosition= (event.pageX+offset)+"px";
return tooltip.style("top",topPosition).style("left",leftPosition);
})
.on("mouseout", function(){
return tooltip.style("visibility","hidden");
});
當我打開 HTML 頁面時，我看到了包含所有g元素的 SVG 元素。 當我將鼠標懸停在每個g元素上時，不會出現工具提示。 但是如果我用svg標簽及其內容替換object ，工具提示就會起作用。 如何讓 d3 在object標簽中選擇一個 SVG？
您需要訪問<object> contentDocument才能訪問其包含的元素。
為此，您還需要等待<object>加載其內容。
我不太喜歡 d3，所以它可能不是最好的 d3 方式，但至少它有效：
（但不是在 StackSnippet 的 null 起源的 iframe 中......）
fetch('https://upload.wikimedia.org/wikipedia/commons/f/fd/Ghostscript_Tiger.svg')
.then(r => r.blob())
.then(b => obj.data = URL.createObjectURL(b));
obj.onload = function() { // wait for the svg has loaded
var tooltip = d3.select("body")
.append("div")
.style("position", "absolute")
.style("z-index", "10")
.style("visibility", "hidden")
.text("Hello");
var obj = this; // we're in the object's load event handler.
var svg = d3.select(obj.contentDocument) // get the contentDocument
.select("svg"); // then get the svg inside
svg.selectAll('g')
.on("mouseover", function() {
return tooltip.style("visibility", "visible");
})
.on("mousemove", function() {
var event = d3.event;
var offset = 20;
var topPosition = (event.pageY - offset) + "px";
var leftPosition = (event.pageX + offset) + "px";
return tooltip.style("top", topPosition).style("left", leftPosition);
})
.on("mouseout", function() {
return tooltip.style("visibility", "hidden");
});
};
<script src="https://d3js.org/d3.v4.min.js"></script>
<object id="obj" type="image/svg+xml"></object>
我沒有使用 d3 的經驗，但這可能會有所幫助。 您需要等到窗口完全加載。
// object of my SVG
<object id="fridge" data={FridgePicture} ></object>
window.onload = function() {
// Get the fridgeObject by ID
var fridgeObj = document.getElementById("fridge");
// Get the SVG document inside the Object tag
var fridgeDoc = fridgeObj.contentDocument;
// From here you can get an item you wish e.g:
var rightDoor = fridgeDoc.getElementById("RightDoor");
};
只是一個簡短的總結，哪些方法有效，哪些無效：
d3.select(obj.node().contentDocument).select('svg').selectAll('g') // get the contentDocument
console.log('node > svg > g => works!',nsvg)
var obj1 = d3.select('#obj'); // we're in the object's load event handler.
var ng = d3.select(obj1.node().contentDocument).selectAll('g') // get the contentDocument
console.log('node > g => works!',ng)
var obj2 = d3.select('#obj'); // we're in the object's load event handler.
var svg = d3.select(obj2.contentDocument).select('svg').selectAll('g') // get the contentDocument
console.log('select svg > g => fails!',svg)
var obj3 = d3.select('#obj'); // we're in the object's load event handler.
var g = d3.select(obj3.contentDocument).selectAll('g') // get the contentDocument
console.log('select g => fails!',g)
var getElement = document.getElementById('obj').contentDocument
var gElements = d3.select(getElement).select('svg').selectAll('g')
console.log("gElements > d3.select svg > g => works!", gElements);
var svg2 = document.getElementById('obj').contentDocument.getElementsByTagName('g')
console.log("getElementById => works!", svg2);
};
如何選擇一個 SVG 元素<object>用 JavaScript 標記？
[英]How to select an SVG element inside an <object> tag with JavaScript?
我如何在svg文檔內的標簽上創建事件“ mouseover”（通過object標簽調用）
[英]how can i create an event “mouseover” on tag inside a svg document (called with the object tag )
如何將文本標簽附加到一個svg，例如“id = 50”的svg標簽？
[英]How do I append the text tag to just one svg e.g. svg tag with “id=50”?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.