首頁 > web前端 > js教程 > 如何使用 JavaScript 從 Illustrator 產生的檔案存取 SVG 元素?

如何使用 JavaScript 從 Illustrator 產生的檔案存取 SVG 元素?

Patricia Arquette
發布: 2024-11-12 07:22:02
原創
517 人瀏覽過

How to Access SVG Elements from Illustrator-Generated Files with JavaScript?

使用JavaScript 從Illustrator 產生的SVG 檔案存取SVG 元素

如上所述,使用JavaScript 從Adobtor 建立的文件存取SVG 元素確實可以在不使用Raphaël 或jQuery 等第三方函式庫的情況下實作SVG。

要實現此目的:

1.非同步載入SVG 檔案:

合併HTML5 元素來非同步載入SVG 檔案並存取其文檔物件模型(DOM)。

<object data="alpha.svg" type="image/svg+xml">
登入後複製

2.新增載入事件監聽器:

將載入事件監聽器附加到;當SVG 文件完成載入且其DOM 可用時執行回調函數。

<script>
    var a = document.getElementById("alphasvg");
    a.addEventListener("load",function(){
        // code here executes after SVG loads
    }, false);
</script>
登入後複製

3.擷取內部DOM 並存取元素:

在載入事件回呼中,透過擷取來操作SVG 文件的內部DOM:

var svgDoc = a.contentDocument;
登入後複製

使用對svgDoc 的引用,您可以存取使用getElementById 按ID指定特定元素方法:

var delta = svgDoc.getElementById("delta");
登入後複製

4.新增事件處理程序:

一旦您有權限存取元素,您就可以為行為附加事件處理程序。例如,要將點擊處理程序新增至「delta」元素:

delta.addEventListener("mousedown",function(){
    alert('hello world!')
}, false);
登入後複製

限制:

此技術受同源策略的約束。因此,SVG 檔案必須與 HTML 檔案託管在同一網域中,以確保存取內部 DOM。

以上是如何使用 JavaScript 從 Illustrator 產生的檔案存取 SVG 元素?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板