溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

JS 操作svg畫圖

發(fā)布時(shí)間：2020-08-14 00:04:28 來(lái)源：ITPUB博客 閱讀：175 作者：ii_chengzi 欄目：web開發(fā)

背景：

一共有3個(gè)文件：svg文件，html文件，js文件。

有一個(gè)svg圖，使用embed標(biāo)簽，引入到了html文件中

svg文件：

JS 操作svg畫圖

HTML文件中：

JS 操作svg畫圖

然后使用js文件來(lái)操縱svg，插入圖形。

第一個(gè)攔路虎：獲得svg dom，

如果你的svg是直接寫在html文件中，那么，svg和HTML共用一個(gè)document，可以直接通過(guò)document.getElementById(svg的id)就可以獲得。

可是，一般情況下，不建議混在一起使用，比如我這里的column圖就是單獨(dú)一個(gè)svg文件，然后使用embed插入到HTML中的。

注意：使用embed、object插入的svg文件，其有完全屬于自己的document：

JS 操作svg畫圖

此時(shí)，再想拿到svg, 則需要使用：getSVGDocument();

使用方法： 先拿到embed節(jié)點(diǎn)，再拿svg document，再拿svg節(jié)點(diǎn)：

JS 操作svg畫圖

注意：

此外，不同于HTML元素對(duì)象可以直接對(duì)一些屬性賦值，SVG元素對(duì)象都需要通過(guò)調(diào)用setAttribute()方法來(lái)設(shè)定屬性值。

使用 rect.width = 30 不起作用。

詳情訪問(wèn)：http://shenzhen.offcn.com/

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手