Vraag Hoe toegang te krijgen tot SVG-elementen met Javascript


Ik ben aan het rommelen met SVG en hoopte dat ik SVG-bestanden kon maken in Illustrator en toegang kon krijgen tot elementen met Javascript.

Hier is het SVG-bestand Illustrator begint (het lijkt ook een hoop rommel toe te voegen aan het begin van het bestand dat ik heb verwijderd)

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

Zoals je waarschijnlijk kunt zien, heeft elk element een ID en hoopte ik toegang te kunnen krijgen tot afzonderlijke elementen met Javascript, zodat ik het kenmerk Vul en aan gebeurtenissen zoals klikken kon beantwoorden.

De HTML is moerasbasis

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

Ik denk dat dit eigenlijk twee vragen zijn.

  1. Is het mogelijk om het op deze manier te doen, in tegenstelling tot het gebruik van iets als Raphael of jQuery SVG.

  2. Als het mogelijk is, wat is de techniek?


BIJWERKEN

Op dit moment heb ik gebruik gemaakt van Illustrator om het SVG-bestand te maken en ik gebruik het Raphaël JS om paden te maken en eenvoudig de puntgegevens uit het SVG-bestand te kopiëren en in te plakken path() functie. Het maken van complexe paden die misschien nodig zijn voor een kaart, door de puntgegevens handmatig te coderen, is naar mijn weten onbetrouwbaar complex.


67
2018-05-02 14:17


oorsprong


antwoorden:


Is het mogelijk om het op deze manier te doen, in tegenstelling tot het gebruik van iets als Raphael of jQuery SVG?

Definitief.

Als het mogelijk is, wat is de techniek?

Dit geannoteerde codefragment werkt:

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

Merk op dat een beperking van deze techniek is dat deze wordt beperkt door hetzelfde beleid van dezelfde oorsprong, dus alpha.svg moet worden gehost op hetzelfde domein als de .html bestand, anders is de innerlijke DOM van het object ontoegankelijk.


88
2017-07-31 21:19



In het geval dat u jQuery gebruikt, moet u wachten op $(window).load, omdat het ingesloten SVG-document mogelijk nog niet is geladen in $(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);
});

17
2018-05-01 15:35



Als u een gebruikt <img> tag voor de SVG, dan kun je de inhoud ervan niet manipuleren (voor zover ik weet).

Zoals het geaccepteerde antwoord laat zien, gebruiken <object> is een optie.

Ik had dit onlangs nodig en gebruikt gulp-inject tijdens mijn slok bouwen om de inhoud van een SVG-bestand rechtstreeks in het HTML-document te injecteren als een <svg> element, dat dan heel gemakkelijk is om mee te werken met behulp van CSS selectors en querySelector/getElementBy*.


1
2017-10-01 20:43