亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

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

如何使用Javascript從SVG路徑動態創建鏈接

如何使用Javascript從SVG路徑動態創建鏈接

蠱毒傳說 2021-05-07 14:31:20
指向svg路徑的動態鏈接不會呈現,但會顯示在Chrome的檢查器中我有一個帶有數百個包含ID的路徑的SVG文件。我寫了一些JavaScript來從每個路徑中提取ID并將其包裝在鏈接中。當我在Chrome瀏覽器中查看檢查器時,我的代碼可以正常工作,但它并未以可點擊鏈接的形式呈現在頁面上。我在某處讀到它是因為它是SVG而不是HTML,但是我找不到解決此問題的任何方法。SVG文件<svg id="shapes" data-name="shapes" xmlns="http://www.w3.org/2000/svg" width="58.7" height="218.6" viewBox="0 0 58.7 218.6"><title>shapes</title><path id="circle" d="M129.6,31.5c-3.1,2.2-4,6.5-4.6,10.3-1,5.9-1.9,11.8-1.3,17.8s2.8,11.9,7.3,15.8c7.7,6.6,20.7,4.8,27.4-2.8,3.9-4.5,5.8-10.2,7.6-15.8,2.9-9,3.8-21.1-5.8-26.4C153.9,26.9,135.1,27.7,129.6,31.5Z" transform="translate(-120.3 -28.1)"/><path id="square" d="M167.6,117.1a354.3,354.3,0,0,1,2.3,53.5,193.3,193.3,0,0,1-43-1.2c-1.8-9.3-10.9-44.1-4.1-51.3C126,114.6,167.7,117.7,167.6,117.1Z" transform="translate(-120.3 -28.1)"/><path id="triangle" d="M127.1,246.7c2.4-2.6,6.4-2.7,9.9-2.7h42c-2.2,0-12.4-20.8-14.1-23.6-2.8-4.5-9.6-20.8-15.7-21.4S130.4,239.6,127.1,246.7Z" transform="translate(-120.3 -28.1)"/></svg>Java腳本            $(document).ready(function(){            var $array = [];            $('path[id]').each(function(){                var id = $(this).attr('id');                $(this).wrap( "<a href="+"https://www.google.com/search?q="+id+"></a>" );                $array.push(id);            });            console.log($array);            });每個形狀都應該是指向從ID提取的動態值的可點擊鏈接。當我運行代碼時,形狀從畫布上消失了,但是在Chrome的檢查器中,我看到了所需的結果。<svg id="shapes" data-name="shapes" xmlns="http://www.w3.org/2000/svg" width="58.7" height="218.6" viewBox="0 0 58.7 218.6"><title>shapes</title><a href="https://www.google.com/search?q=circle"><path id="circle" d="M129.6,31.5c-3.1,2.2-4,6.5-4.6,10.3-1,5.9-1.9,11.8-1.3,17.8s2.8,11.9,7.3,15.8c7.7,6.6,20.7,4.8,27.4-2.8,3.9-4.5,5.8-10.2,7.6-15.8,2.9-9,3.8-21.1-5.8-26.4C153.9,26.9,135.1,27.7,129.6,31.5Z" transform="translate(-120.3 -28.1)"></path></a>這是我的代碼的鏈接:https : //jsfiddle.net/L5d8oufj/
查看完整描述

2 回答

  • 2 回答
  • 0 關注
  • 258 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號