如何使用Javascript访问SVG元素 [英] How to access SVG elements with Javascript

查看:103
本文介绍了如何使用Javascript访问SVG元素的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在搞乱SVG,我希望我可以在Illustrator中创建SVG文件并使用Javascript访问元素。



这是SVG文件Illustrator的解决方案(它似乎也在我删除的文件的开头添加了一堆垃圾)

 <?xml version =1.0encoding =utf-8?> 
<!DOCTYPE svg PUBLIC - // W3C // DTD SVG 1.1 // ENhttp://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd\">
< svg version =1.1id =Layer_1xmlns =http://www.w3.org/2000/svgxmlns:xlink =http://www.w3.org/1999 / xlinkx =0pxy =0px
width =276.843pxheight =233.242pxviewBox =0 0 276.843 233.242enable-background =new 0 0 276.843 233.242
xml:space =preserve>
< path id =deltafill =#231F20d =M34.074,86.094L0,185.354l44.444,38.519l80.741-0.74l29.63-25.186l-26.667-37.037
c0,0-34.815-5.926-37.778-6.667s-13.333-28.889-13.333-28.889l7.407-18.519l31.111-2.963l5.926-21.481l-12.593-38.519l-43.704-5.185
L34.074,86.094z/>
< path id =cargofill =#DFB800d =M68.148,32.761l43.704,4.445l14.815,42.963l-7.407,26.667l-33.333,2.963l-4.444, 14.074
l54.074-1.481l22.222,36.296l25.926-3.704l25.926-54.074c0,0-19.259-47.408-21.481-47.408s-31.852-0.741-31.852-0.741
l -19.259-39.259L92.593,8.316L68.148,32.761z/>
< polygon id =betafill =#35FF1Fpoints =86.722,128.316 134.593,124.613 158.296,163.872 190.889,155.724 214.593,100.909
194.593,52.02 227.186,49.057 246.444,92.02 238.297 ,140.909 216.074,172.761 197.556,188.316 179.778,169.798 164.963,174.983
163.481,197.946 156.815,197.946 134.593,159.428 94.593,151.279/>
< path class =monkeyid =alphafill =#FD00FFd =M96.315,4.354l42.963,5.185l18.519,42.222l71.852-8.148l20.74, 46.667l-5.926,52.593
l-24.444,34.074l-25.185,15.555l-14.074-19.259l-8.889,2.964l-1.481,22.222l-14.074,2.963l-25.186,22.963l-74.074,4.444
l101.481,4.444c0,0,96.297-17.777,109.63-71.852S282.24,53.983,250.389,20.65S96.315,4.354,96.315,4.354z/>
< / svg>

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



HTML是bog basic

 <!DOCTYPE html> 
< html>
< head>
< title> SVG Illustrator测试< / title>
< / head>
< body>

< object data =alpha.svgtype =image / svg + xmlid =alphasvgwidth =100%height =100%>< / object> ;

< / body>
< / html>

我想这真是两个问题。


  1. 是否可以这样做,而不是使用像Raphael或jQuery SVG这样的东西。


  2. 如果有可能,技术是什么?







UPDATE



目前,我已经使用Illustrator创建SVG文件,我正在使用RaphaëlJS来创建路径并简单地从SVG文件中复制点数据并粘贴它进入 path()函数。通过手动编码点数据来创建地图可能需要的复杂路径(据我所知)非常复杂。

解决方案

< blockquote>

是否可以这样做,而不是使用像Raphael或jQuery SVG这样的东西?


绝对。


如果有可能,该技术是什么?


此带注释的代码段有效:

 <!DOCTYPE html> 
< html>
< head>
< title> SVG Illustrator测试< / title>
< / head>
< body>

< object data =alpha.svgtype =image / svg + xml
id =alphasvgwidth =100%height =100%> < /对象>

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

//向对象添加一个load事件监听器很重要,
//因为它将异步加载svg doc
a.addEventListener(load,function( ){

//获取alpha.svg的内部DOM
var svgDoc = a.contentDocument;
//通过id获取内部元素
var delta = svgDoc.getElementById(delta);
//添加行为
delta.addEventListener(mousedown,function(){
alert('hello world!')
} ,false);
},false);
< / script>
< / body>
< / html>

请注意,此技术的限制是它受同源政策的限制,因此 alpha.svg 必须与 .html 文件托管在同一个域中,否则对象的内部DOM将是无法访问。


I'm messing around with SVG and I was hoping I could create SVG files in Illustrator and access elements with Javascript.

Here's the SVG file Illustrator kicks out (It also seems to add a load of junk to the beginning of the file that I've removed)

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="276.843px" height="233.242px" viewBox="0 0 276.843 233.242" enable-background="new 0 0 276.843 233.242"
     xml:space="preserve">
<path id="delta" fill="#231F20" d="M34.074,86.094L0,185.354l44.444,38.519l80.741-0.74l29.63-25.186l-26.667-37.037
    c0,0-34.815-5.926-37.778-6.667s-13.333-28.889-13.333-28.889l7.407-18.519l31.111-2.963l5.926-21.481l-12.593-38.519l-43.704-5.185
    L34.074,86.094z"/>
<path id="cargo" fill="#DFB800" d="M68.148,32.761l43.704,4.445l14.815,42.963l-7.407,26.667l-33.333,2.963l-4.444,14.074
    l54.074-1.481l22.222,36.296l25.926-3.704l25.926-54.074c0,0-19.259-47.408-21.481-47.408s-31.852-0.741-31.852-0.741
    l-19.259-39.259L92.593,8.316L68.148,32.761z"/>
<polygon id="beta" fill="#35FF1F" points="86.722,128.316 134.593,124.613 158.296,163.872 190.889,155.724 214.593,100.909 
    194.593,52.02 227.186,49.057 246.444,92.02 238.297,140.909 216.074,172.761 197.556,188.316 179.778,169.798 164.963,174.983 
    163.481,197.946 156.815,197.946 134.593,159.428 94.593,151.279 "/>
<path class="monkey" id="alpha" fill="#FD00FF" d="M96.315,4.354l42.963,5.185l18.519,42.222l71.852-8.148l20.74,46.667l-5.926,52.593
    l-24.444,34.074l-25.185,15.555l-14.074-19.259l-8.889,2.964l-1.481,22.222l-14.074,2.963l-25.186,22.963l-74.074,4.444
    l101.481,4.444c0,0,96.297-17.777,109.63-71.852S282.24,53.983,250.389,20.65S96.315,4.354,96.315,4.354z"/>
</svg>

As you can probably see, each element has an ID, and I was hoping to be able to access individual elements with Javascript so I could change the Fill attribute and respond to events such as click.

The HTML is 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>

I guess this is two questions really.

  1. Is it possible to do it this way, as opposed to using something like Raphael or jQuery SVG.

  2. If it is possible, what's the technique?


UPDATE

At the moment, I've resorted to using Illustrator to create the SVG file, and I'm using Raphaël JS to create paths and simply copying the point data from the SVG file and pasting it into path() function. Creating complex paths such as might be needed for a map, by coding the point data manually is (to my knowledge) prohibitively complex.

解决方案

Is it possible to do it this way, as opposed to using something like Raphael or jQuery SVG?

Definitely.

If it is possible, what's the technique?

This annotated code snippet works:

<!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>

Note that a limitation of this technique is that it is restricted by the same-origin policy, so alpha.svg must be hosted on the same domain as the .html file, otherwise the inner DOM of the object will be inaccessible.

这篇关于如何使用Javascript访问SVG元素的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆