第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

jQuery 選擇 <object> 標簽內的 SVG 錨點元素

jQuery 選擇 <object> 標簽內的 SVG 錨點元素

吃雞游戲 2023-05-25 17:27:11
我在使用我的 SVG 中內置的錨元素時遇到了很多麻煩(顯示為<object>)。我正在嘗試使用 jQuery 將我的對象中的錨點元素作為目標,以便在單擊時切換其各自的內容。如果您看一下我的示例,我的 SVG 中內置了 3 個鏈接(它們的綠色陰影比其他的更淺)。我使用 InkScape 創(chuàng)建我的 SVG 圖像,并且在鏈接的淺綠色區(qū)域上只是 href 屬性分別等于“#operable-shades”、“#gutters-downspouts”和“#gable-pediments”的形狀。當我的 SVG 在我的頁面上很好地顯示(使用標簽<object>)時,當將鼠標懸停在我創(chuàng)建的鏈接上時,我得到原始對象數(shù)據(jù) URL,并在其末尾附加了我指定的錨點(例如“https://example.com” /wp-content/uploads/GHB_Interface-v0.1.svg#gable-pediments') 當我期望它是'https://example.com/#gable-pediments'。<script type="text/javascript">jQuery(document).ready(function($) {    $('.ghb_toggle').hide()    $('a[href^="#"]').on('click', function(event) {        var target = $(this).attr('href');        $(target).toggle();    });});</script>.ghb_toggle {  display:none;}<object type="image/svg+xml" data="https://example.com/wp-content/uploads/test.svg" width="500" height="400"></object><div id="gable-pediments" class="ghb_toggle">  <p>Content 1</p></div><div id="gutters-downspouts" class="ghb_toggle">  <p>Content 2</p></div><div id="operable-shades" class="ghb_toggle">  <p>Content 3</p></div>我怎樣才能修改我的 jQuery 以便能夠成功地與我內部的錨元素交互<object>以隱藏/顯示具有唯一標識符的相應內容?
查看完整描述

1 回答

?
一只名叫tom的貓

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>


查看完整回答
反對 回復 2023-05-25
  • 1 回答
  • 0 關注
  • 221 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網(wǎng)微信公眾號