如何使用Javascript访问SVG元素
我搞砸了SVG，希望能在Illustrator中创建SVG文件并使用Javascript访问元素。
这是Illustrator推出的SVG文件（它似乎也向我删除的文件的开头添加了一些垃圾）
<?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>
正如您可能看到的那样，每个元素都有一个ID，我希望能够使用Javascript访问单个元素，以便我可以更改Fill属性并响应诸如click之类的事件。
HTML是基本的
<!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>
我想这真的是两个问题。
-
与使用Raphael或jQuery SVG之类的东西相反，是否可以通过这种方式做到这一点？
-
如果可能的话，这是什么技术？
更新
目前，我已经使用Illustrator来创建SVG文件，并且我正在使用RaphaëlJS创建路径，并简单地从SVG文件中复制点数据并将其粘贴到path()函数中。通过手动编码点数据（据我所知），创建复杂的路径（例如地图可能需要的路径）非常复杂。
问题答案：
与使用Raphael或jQuery SVG之类的东西相反，是否可以通过这种方式做到这一点？
绝对是
如果可能的话，这是什么技术？
这个带注释的代码段有效：
<!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>
请注意，此技术的局限性在于它受同源策略限制，因此alpha.svg必须与.html文件托管在同一域中，否则将无法访问对象的内部DOM。
-
问题内容： 我有一个网页，其中iframe内有一个texarea。我需要从其子页面javascript读取此textarea的值。目前，通过在javascript中使用，我能够提取父页面中除iframe中的textarea之外的所有控件的值。 父页面中的框架ID和框架名称在运行时会更改，因此我们无法使用框架ID /框架名称作为参考。 问题答案： 如果您有HTML 和JavaScript 现在是对文
-
问题内容： 是用PHP生成的SVG对象。 一片空白。（因此，我无法通过JS访问svg的元素。）它应该可以工作，看看这个问题。我究竟做错了什么？如何获得SVG？ 问题答案： 您需要等待SVG加载完毕，然后才能访问contentDocument：
-
JAVASCRIPT文件 HTML文件 每当我试图执行上面的代码时，它会给我一个类似这样的错误 谁能告诉我怎样才能做到不出错。
-
使用下面的XML，谁能告诉我在Groovy（Gpath或Xpath）中如何在最左边的元素上执行select，并包含对正确父元素的引用？ 用英语编写的select语句是： 查询返回的元素必须包括来自employment_information的person_id_external，以及来自Job_Information的start_date。 到目前为止我已经试过了.... 当输入文件中只有一个人时
-
我试图找到以下元素并在其中输入文本。我尝试了许多不同的方法来访问该元素，但总是得到相同的错误。我当前的代码行 生成相同的错误 找不到元素：{“method”：“id”，“selector”：“keyword”} 下面显示的元素显然具有Id“keyword”。 我使用Firebug捕获此元素的完整XPath。 /html/body/div/span/table[3]/tbody/tr/td/tabl
-
本文向大家介绍如何使用JavaScript创建SVG图形？，包括了如何使用JavaScript创建SVG图形？的使用技巧和注意事项，需要的朋友参考一下 所有现代浏览器均支持SVG，您可以使用JavaScript轻松创建它。Google Chrome和Firefox均支持SVG。 使用JavaScript创建一个空白的SVG文档对象模型(DOM)。使用属性创建形状，例如圆形或矩形。