首頁(yè) 猿問(wèn) 如何使用Javascript訪問(wèn)S...

如何使用Javascript訪問(wèn)SVG元素

JavaScript

暮色呼如 2019-07-09 13:16:53

如何使用Javascript訪問(wèn)SVG元素我正在處理SVG，我希望能在IlluStrator中創(chuàng)建SVG文件，并使用Javascript訪問(wèn)元素。這里是SVG文件IlluStrator啟動(dòng)(它似乎還添加了大量垃圾文件的開(kāi)頭，我已經(jīng)刪除)<?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正如您可能看到的，每個(gè)元素都有一個(gè)ID，我希望能夠使用Javascript訪問(wèn)各個(gè)元素，這樣我就可以更改Fill屬性并響應(yīng)諸如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>我想這是兩個(gè)問(wèn)題。是否可以這樣做，而不是使用像Raphael或jQuerySVG這樣的東西。如果可能的話，技術(shù)是什么？更新目前，我已經(jīng)求助于使用IlluStrator來(lái)創(chuàng)建SVG文件，并且我正在使用Rapha l JS創(chuàng)建路徑，只需將點(diǎn)數(shù)據(jù)從SVG文件復(fù)制并粘貼到path()功能。通過(guò)手動(dòng)編碼點(diǎn)數(shù)據(jù)來(lái)創(chuàng)建復(fù)雜的路徑(如地圖可能需要的路徑)(據(jù)我所知)是非常復(fù)雜的。

查看完整描述

3 回答

心有法竹

TA貢獻(xiàn)1866條經(jīng)驗(yàn) 獲得超5個(gè)贊

如果使用jQuery，則需要等待$(window).load，因?yàn)榍度氲腟VG文檔可能還沒(méi)有加載到$(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);});

反對(duì) 回復(fù) 2019-07-09