代码之家 › 专栏 › 技术社区 › Staale

是否可以使用javascript操作嵌入在HTML文档中的SVG文档?

svg html javascript

Staale · 技术社区 · 17 年前

我制作了一个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文档调用这些方法?

7 回复 | 直到 15 年前

Adam Bellaire 17 年前

解决方案:

在SVG中:

<script>document.method = function() {}</script>

在HTML中(使用原型添加事件侦听器):

<script>$("img").observe("load", function() {$("img").contentDocument.method()});

您需要监听图像上的加载事件。加载图像后,可以使用 element.contentDocument 访问SVG文档上的文档变量。任何添加的方法都将可用。

Temperage 15 年前

事情其实比你想象的简单。您不需要阅读复杂的教程来理解这个概念,也不需要使用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>
```

Pete Karl II 17 年前

几年前,我被要求用SVG创建一个基于Ajax的2人游戏。它可能不是您正在寻找的解决方案,但它可能会帮助您在SVG中聆听事件。这是SVG控制器:

仅供参考,SVG被拖走了(它是Stratego)

/****************** 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,但这就是它的要点。

Ris Adams 17 年前

我认为大卫·戴利博士是你能找到的最棒的SVG/JS信息。 http://srufaculty.sru.edu/david.dailey/svg/

David.Chu.ca 17 年前

我已经通过javascripts探索了SVG。看博客: Scaling SVG Graphics with JavaScripts

kbwood 17 年前

也看到 jQuery SVG plugin

Matt Ellen Bipin Vayalu 15 年前

要获得IE6的支持,请看 SVGWeb .

在随库提供的示例代码中,有一些关于如何使用JavaScript操作SVG的示例。

邮件列表的档案中也有相当数量的信息。