如何访问JavaScript的SVG元素
我搞乱了SVG，希望能在Illustrator中创buildSVG文件，并用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的单个元素，所以我可以改变填充属性和响应事件，如点击。
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>
我想这是两个问题。
-
是否有可能这样做，而不是使用像拉斐尔或jQuery SVG的东西。
-
如果可能的话，技术是什么？
UPDATE
目前，我已经使用Illustrator来创buildSVG文件，我使用RaphaëlJS来创buildpath，并简单地从SVG文件中复制点数据并将其粘贴到path()函数中。 （就我所知），通过手动编写点数据来创build地图所需的复杂path非常复杂。
是否有可能这样做，而不是使用拉斐尔或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将无法访问。
如果你使用jQuery，你需要等待$(window).load ，因为embedded的SVG文档可能还没有加载到$(document).ready
$(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的<img>标签，那么你不能操纵它的内容（据我所知）。
正如接受的答案所示，使用<object>是一个选项。
我最近需要这个，在我的gulp构build过程中使用gulp-inject将SVG文件的内容作为<svg>元素直接注入到HTML文档中，然后使用CSSselect器和querySelector / getElementBy*很容易。
