Created
August 28, 2014 07:04
-
-
Save a2f0/6371c0ab2d72d555cd7c to your computer and use it in GitHub Desktop.
awesome SVG example
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>This shows how to get elements inside included svg images from the surrounding html.</title> | |
| </head> | |
| <body> | |
| <object class="emb" data="images/svglogo.svg" width="100" height="100" type="image/svg+xml"></object> | |
| <embed class="emb" src="images/svglogo.svg" width="100" height="100" type="image/svg+xml" /> | |
| <iframe class="emb" src="images/svglogo.svg" width="100" height="100" style="border:0" ></iframe> | |
| <p> | |
| You should see three svg logo images with green fill above here. | |
| </p> | |
| <p> | |
| If any of the logos are shown in orange that means the browser failed to access the DOM of the referenced svg resource. | |
| From left to right we have <object>, <embed> and <iframe> that all reference the <a href="images/svglogo.svg">same svg file</a>. | |
| The script gets the referenced svg document either with <code>contentDocument</code> or <code>getSVGDocument()</code> and then sets the fill color | |
| to lime green. | |
| </p> | |
| <p> | |
| View source to see how this works. | |
| </p> | |
| <script>//<![CDATA[ | |
| // wait until all the resources are loaded | |
| window.addEventListener("load", findSVGElements, false); | |
| // fetches the document for the given embedding_element | |
| function getSubDocument(embedding_element) | |
| { | |
| if (embedding_element.contentDocument) | |
| { | |
| return embedding_element.contentDocument; | |
| } | |
| else | |
| { | |
| var subdoc = null; | |
| try { | |
| subdoc = embedding_element.getSVGDocument(); | |
| } catch(e) {} | |
| return subdoc; | |
| } | |
| } | |
| function findSVGElements() | |
| { | |
| var elms = document.querySelectorAll(".emb"); | |
| for (var i = 0; i < elms.length; i++) | |
| { | |
| var subdoc = getSubDocument(elms[i]) | |
| if (subdoc) | |
| subdoc.getElementById("svgbar").setAttribute("fill", "lime"); | |
| } | |
| } | |
| //]]> | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment