1 回答

TA貢獻1906條經(jīng)驗 獲得超3個贊
<object>
要定位在, 或中加載的 svg 文檔的內容<iframe>
,您需要將正確的文檔上下文傳遞給 jQuery:您可以從.contentDocument
嵌入元素的屬性訪問的上下文。
請注意,這要求 svg 文檔以同源方式加載,這在 StackSnippets 的空源幀中是不可能的,所以這里是一個實時的 plnkr。
$( "object" ).on( "load", (evt) => {
? const svg_doc = this.contentDocument;
? $( "a[href]", svg_doc ) // second argument is context
? ? .on( 'click', (evt) => {
? ? ? // add your listener here
? ? } );
};
另請注意,在您的 svg 中,您xlink:href定義了屬性,而不僅僅是href,因此您的 jQuery 選擇器應該是'a[xlink\\:href^="#"]'
但是,如果您的目標是將 svg 中的錨點設置為相對于其他基本 URL 而不是從中加載文檔的基本 URL,那么您不需要所有這些,您可以簡單地在 svg 文檔的開頭插入一個 HTML<base>
元素并且所有相對 URL 都將使用它。
將現(xiàn)場演示視為plnkr和更復雜的片段:
// To be able to embed it in a StackSnippet (directly in this answer),
// we need to generate the file in memory from JS
// you don't need it
const svg_content = `
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" width="300" >
? <!-- we must declare it in the HTML namespace -->
? <base xmlns="http://www.w3.org/1999/xhtml" />
? <a href="#foo-bar">
? ? <rect fill="green" x="10" y="10" width="30" height="30" />
? </a>
</svg>
`;
const svg_blob = new Blob( [ svg_content ], { type: "image/svg+xml" } );
const svg_url = URL.createObjectURL( svg_blob );
document.querySelector( "object" ).data = svg_url;
<object></object>
添加回答
舉報