如何使用Javascript访问SVG元素_Javascript_Svg_Raphael

如何使用Javascript访问SVG元素

javascript svg

如何使用Javascript访问SVG元素,javascript,svg,raphael,Javascript,Svg,Raphael,我在搞SVG，我希望我能在Illustrator中创建SVG文件，并用Javascript访问元素下面是SVG文件Illustrator的演示（它似乎也在我删除的文件开头添加了大量垃圾）正如您可能看到的，每个元素都有一个ID，我希望能够使用Javascript访问各个元素，这样我就可以更改Fill属性并响应诸如click之类的事件 HTML是bog-basic <!DOCTYPE html> <html> <head> <

我在搞SVG，我希望我能在Illustrator中创建SVG文件，并用Javascript访问元素

下面是SVG文件Illustrator的演示（它似乎也在我删除的文件开头添加了大量垃圾）

正如您可能看到的，每个元素都有一个ID，我希望能够使用Javascript访问各个元素，这样我就可以更改Fill属性并响应诸如click之类的事件

HTML是bog-basic

<!DOCTYPE html>
<html>
    <head>
        <title>SVG Illustrator Test</title> 
    </head>
    <body>

        <object data="alpha.svg" type="image/svg+xml" id="alphasvg" width="100%" height="100%"></object>

    </body>
</html>


SVG插画测试

我想这真的是两个问题

与使用Raphael或jQuerySVG之类的东西相比，是否可以这样做

如果可能，技术是什么

更新

目前，我使用Illustrator创建SVG文件，我使用Illustrator创建路径，简单地从SVG文件复制点数据并将其粘贴到

path（）

函数中。据我所知，通过手动编码点数据来创建地图可能需要的复杂路径非常复杂

与使用Raphael或JQuerySVG之类的东西相比，是否可以这样做

当然

如果可能，技术是什么

此带注释的代码段可以工作：

<!DOCTYPE html>
<html>
    <head>
        <title>SVG Illustrator Test</title> 
    </head>
    <body>

        <object data="alpha.svg" type="image/svg+xml"
         id="alphasvg" width="100%" height="100%"></object>

        <script>
            var a = document.getElementById("alphasvg");

            // It's important to add an load event listener to the object,
            // as it will load the svg doc asynchronously
            a.addEventListener("load",function(){

                // get the inner DOM of alpha.svg
                var svgDoc = a.contentDocument;
                // get the inner element by id
                var delta = svgDoc.getElementById("delta");
                // add behaviour
                delta.addEventListener("mousedown",function(){
                        alert('hello world!')
                }, false);
            }, false);
        </script>
    </body>
</html>


SVG插画测试
var a=document.getElementById（“alphasvg”）；
//向对象添加加载事件侦听器很重要，
//因为它将异步加载svg文档
a、 addEventListener（“加载”，函数（）{
//获取alpha.svg的内部DOM
var svgDoc=a.contentDocument；
//通过id获取内部元素
var delta=svgDoc.getElementById（“delta”）；
//添加行为
delta.addEventListener（“mousedown”，function（）{
警报（“你好，世界！”）
}，假）；
}，假）；

请注意，此技术的一个限制是它受同源策略的限制，因此

alpha.svg

必须与

.html

文件位于同一域中，否则对象的内部DOM将无法访问

重要事项要运行此HTML，您需要将HTML文件托管到web服务器，如IIS、Tomcat

如果您使用jQuery，您需要等待

$（窗口）。加载

，因为嵌入的SVG文档可能尚未在

$（文档）加载。就绪

$(window).load(function () {

    //alert("Document loaded, including graphics and embedded documents (like SVG)");
    var a = document.getElementById("alphasvg");

    //get the inner DOM of alpha.svg
    var svgDoc = a.contentDocument;

    //get the inner element by id
    var delta = svgDoc.getElementById("delta");
    delta.addEventListener("mousedown", function(){ alert('hello world!')}, false);
});

如果您正在为SVG使用

标记，则无法操作其内容（据我所知）

正如公认的答案所示，使用

是一种选择

我最近需要它，并在gulp构建过程中使用了

gulp inject

将SVG文件的内容作为

元素直接注入HTML文档，在使用此代码时，使用CSS选择器和

querySelector

getElementBy*

非常容易，另一个答案可能是一个有用的补充：对于jQuery，您最好使用

$（“#alphasvg”）.load

而不是

$（window.load

）。这将允许您更改flyNote上的属性

data

。注意，虽然可以使用jQuery访问svg中的元素，但不能使用它将元素附加到svg中。有关原因，请参见@jbeard4的注释：在某些浏览器中，此同源策略导致需要使用服务器（即使您的代码仅使用html和js[serverside]），访问策略将阻止对svg的访问。运行此html的重要一点是，您需要将html文件托管到web服务器，如IIS，TomcatAs@HienNguyen提到，在web服务器上运行它之前，它不起作用。

document.getElementById（“alphasvg”）.contentDocument

返回的值为

null

.TL；DR：从HTML上下文到SVG上下文的桥接

img

标记对于大型SVG加载非常有用。。。为了更好地使用复杂的（交互式的）SVG，这就像LitejQuery，专门用于SVG+DOM+数据操作。

$(window).load(function () {

    //alert("Document loaded, including graphics and embedded documents (like SVG)");
    var a = document.getElementById("alphasvg");

    //get the inner DOM of alpha.svg
    var svgDoc = a.contentDocument;

    //get the inner element by id
    var delta = svgDoc.getElementById("delta");
    delta.addEventListener("mousedown", function(){ alert('hello world!')}, false);
});