How to access SVG elements with Javascript

by

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.

Important thing to run this HTML, you need host HTML file to web server like IIS, Tomcat

More Related Contents:

  1. SVG re-ordering z-index (Raphael optional)
  2. Programmatically creating an SVG image element with javascript
  3. jQuery SVG vs. Raphael [closed]
  4. Convert SVG to image (JPEG, PNG, etc.) in the browser
  5. jQuery SVG, why can’t I addClass?
  6. How to add a tooltip to an svg graphic?
  7. Changing SVG image color with javascript
  8. With JavaScript, can I change the Z index/layer of an SVG element?
  9. How can d3.transform be used in d3 v4?
  10. How do you access the contents of an SVG file in an element?
  11. How to save svg canvas to local filesystem
  12. How to prevent an HTTP request just for a favicon?
  13. Why does d3.js v3 break my force graph when implementing zooming when v2 doesn’t?
  14. How to draw a path smoothly from start point to end point in D3.js
  15. Is there some innerHTML replacement in SVG/XML?
  16. (Embed and) Refer to an external SVG via D3 and/or javascript
  17. How can I get png(base64) with images inside of svg in Google Charts?
  18. Plotting points on a map with D3
  19. How can I animate a progressive drawing of svg path?
  20. Circles in Map Displayed Incorrect Location in D3 V4
  21. How to draw a vector path progressively? (Raphael.js)
  22. SVG to Canvas with d3.js
  23. size of createElement(“svg”) is 0,0
  24. How to show SVG file on React Native?
  25. Display an arrow head in the middle of D3 force layout link
  26. Is there an equivalent of canvas’s toDataURL method for SVG? [closed]
  27. SVG get text element width
  28. Include SVG files with HTML, and still be able to apply styles to them?
  29. How do I dynamically insert an SVG image into HTML?
  30. Can’t make paths draw growing slowly with D3

Leave a Comment