如何使用 JavaScript 從 Illustrator 產生的檔案存取 SVG 元素？
- Patricia Arquette原創
- 2024-11-12 07:22:02462瀏覽
使用JavaScript 從Illustrator 產生的SVG 檔案存取SVG 元素
如上所述，使用JavaScript 從Adobtor 建立的文件存取SVG 元素確實可以在不使用Raphaël 或jQuery 等第三方函式庫的情況下實作SVG。
要實現此目的：
1.非同步載入SVG 檔案：
合併HTML5
<object data="alpha.svg" type="image/svg+xml">
2.新增載入事件監聽器：
將載入事件監聽器附加到
<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中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn