Created
September 23, 2015 18:21
-
-
Save chriscoyier/6085a237571a3abe315c to your computer and use it in GitHub Desktop.
Difference Between Inline SVG reference and External reference
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 lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Document</title> | |
| <style> | |
| .icon { | |
| width: 100px; | |
| height: 100px; | |
| } | |
| .spade-path, | |
| .pencil-path { | |
| fill: green; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <svg style="position: absolute; width: 0; height: 0;" width="0" height="0" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> | |
| <defs> | |
| <symbol id="icon-spades" viewBox="0 0 1024 1024"> | |
| <title>spades</title> | |
| <path class="spade-path" d="M817.57 348.15c-193.566-143.858-260.266-259.018-305.566-348.148v0c-0.004 0-0.004-0.002-0.004-0.002v0.002c-45.296 89.13-112 204.292-305.566 348.148-330.036 245.286-19.376 587.668 253.758 399.224-17.796 116.93-78.53 202.172-140.208 238.882v37.744h384.032v-37.74c-61.682-36.708-122.41-121.954-140.212-238.884 273.136 188.446 583.8-153.94 253.766-399.226z"></path> | |
| </symbol> | |
| </defs> | |
| </svg> | |
| <!-- INTERNAL --> | |
| <svg class="icon"> | |
| <use xlink:href="#icon-spades" /> | |
| </svg> | |
| <!-- EXTERNAL --> | |
| <svg class="icon"> | |
| <use xlink:href="test-ext-svgdefs.svg#icon-pencil" /> | |
| </svg> | |
| <script> | |
| var one = document.querySelectorAll(".spade-path"); | |
| console.log(one); | |
| var two = document.querySelectorAll(".pencil-path"); | |
| console.log(two); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Aha my console is loaded with warnings and errors
Content Security Policy: The page’s settings blocked the loading of a resource at self (“script-src https://assets-cdn.github.com”). Source: (function injected(eventName, injectedIn...