使用 JavaScript 从 Illustrator 生成的 SVG 文件访问 SVG 元素
如上所述,使用 JavaScript 从 Adobe Illustrator 创建的 SVG 文件访问 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中文网其他相关文章!