是否可以使用 JavaScript 操作嵌入在 HTML 文档中的 SVG 文档
Is it possible to manipulate an SVG document embedded in an HTML doc with JavaScript?
我制作了一个SVG图像,或者更像是迷你应用程序,用于查看数据图表。我想将其包含在 HTML 页面中,并在 SVG 图像上调用方法。
例:
<object id="img" data="image.svg" width="500" height="300"/>
<script>document.getElementById("img").addData([1,23,4]);</script>
是否可以在 SVG 文档上调用方法?如果是这样,如何声明要在 SVG 文件中公开的方法,以及如何从 HTML 文档中调用它们?
解决方案:
在 SVG 中:
<script>document.method = function() {}</script>
在 HTML 中(使用原型添加事件侦听器):
<script>$("img").observe("load", function() {$("img").contentDocument.method()});
您需要侦听图像上的加载事件。加载图像后,您可以使用element.contentDocument
访问 svg 文档上的文档变量。添加到其中的任何方法都将可用。
事情实际上比你想象的要简单。您实际上不需要阅读复杂的教程来理解这个概念,也不必使用 JQuery。以下是基本布局:
-
html 文档中的 JavaScript 函数。
<script type="text/javascript"> function change(){ var s=document.getElementById("cube"); s.setAttribute("stroke","0000FF"); } </script>
-
我们试图操作的 SVG 元素。
<svg width=100 height=100 style='float: left;'> <rect x="10" y="10" width="60" height="60" id="cube" onclick="change()" stroke=#F53F0C stroke-width=10 fill=#F5C60C /> </svg>
-
将触发更改的内联按钮。请注意,在我的示例中,也可以通过单击多维数据集本身来触发事件。
<button onclick="change()">Click</button>
几年前,我被要求使用SVG创建一个基于Ajax的2人游戏。 它可能不是您正在寻找的解决方案,但它可以帮助您侦听 SVG 中的事件。 下面是 SVG 控制器:
仅供参考,SVG 正在被拖放(它是战略)
/****************** Track and handle SVG object movement *************/
var svgDoc;
var svgRoot;
var mover=''; //keeps track of what I'm dragging
///start function////
//do this onload
function start(evt){
//set up the svg document elements
svgDoc=evt.target.ownerDocument;
svgRoot=svgDoc.documentElement;
//add the mousemove event to the whole thing
svgRoot.addEventListener('mousemove',go,false);
//do this when the mouse is released
svgRoot.addEventListener('mouseup',releaseMouse,false);
}
// set the id of the target to drag
function setMove(id){ mover=id; }
// clear the id of the dragging object
function releaseMouse(){
if(allowMoves == true){ sendMove(mover); }
mover='';
}
// this is launched every mousemove on the doc
// if we are dragging something, move it
function go(evt){
if(mover != '' && allowMoves != false) {
//init it
var me=document.getElementById(mover);
//actually change the location
moveX = evt.clientX-135; //css positioning minus 1/2 the width of the piece
moveY = evt.clientY-65;
me.setAttributeNS(null, 'x', evt.clientX-135);
me.setAttributeNS(null, 'y', evt.clientY-65);
}
}
function moveThis(pieceID, x, y) {
$(pieceID).setAttributeNS(null, 'x', x);
$(pieceID).setAttributeNS(null, 'y', y);
}
我的应用程序是纯粹的SVG + JavaScript,但这是它的要点。
我会参考David Dailey博士作为您会发现的最棒的SVG/JS信息http://srufaculty.sru.edu/david.dailey/svg/
我已经探索了JavaScripts的svg。请参阅博客:使用 JavaScript 缩放 SVG 图形
另请参阅 jQuery SVG 插件
有关IE6的支持,请查看SVGWeb。
在库提供的示例代码中,有关于如何使用 JavaScript 操作 SVG 的示例。
邮件列表的档案中也有相当多的信息。
- 从Javascript和Php变量创建Html模板文档
- 有没有一种方法可以在没有文档或jQuery的情况下使用javascript解码html实体
- HTML文档中脚本标记的位置-<头部>&<身体>有不同的行为
- 如何从多个不同的html页面获得mongodb文档的用户输入
- 暂停文档-HTML、CSS、JavaScript
- 如何用javascript重写html文档
- 是否可以使用有角度的HTML文档进行$编译
- 从现有html自动生成html源文档
- 枚举附加到文档的HTML对象的所有事件
- 如何确保通过电子邮件发送的html文档中的Google Drive链接不会被识别为附件
- 将jQuery.js文件附加到html文档中
- 谷歌文档如何拦截Ctrl-S/Command-S来保存文档而不是html页面
- 为任意html文档创建不引人注目的覆盖
- 在HTML文档中使用XML文件中的数据
- 删除“;NaN”;来自HTML文档
- <!文档html>在JS脚本中触发“use strict”
- 在Google Apps Script中获取javascript“文档HTML DOM”信息
- 在使用 Chrome 扩展程序加载之前,使用 document_start 修改文档 html
- 在html中嵌入文档(html/pdf/swf/…)的统一方法
- 文档Html,它是真正的文档在javascript