d3.text() is the 1st key to include a SVG file on the DOM using D3js, the 2nd one is d3.selection().html(). After you inject the SVG you can manipulate the SVG using common D3js technics.
Last active
May 3, 2018 03:36
-
-
Save jkutianski/bd32c81f876af95dbcfe7e20f3e289ff to your computer and use it in GitHub Desktop.
Reading SVG files with D3js
This file contains hidden or 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> | |
| <meta charset="utf-8"> | |
| <body> | |
| <script src="http://d3js.org/d3.v3.min.js"></script> | |
| <script> | |
| var width = 960, | |
| height = 500; | |
| d3.text('boom.svg', (textsvg) => { | |
| d3.selectAll("body") | |
| .html(textsvg) | |
| .select("*") | |
| .attr('width', `${width}px`) | |
| .attr('height', `${height}px`); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
This file contains hidden or 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
| These Pop Art Elements is licensed under Creative Commons Attribution 3.0 Unported License - http://creativecommons.org/licenses/by/3.0/. | |
| Under this license, you are free to copy and redistribute the material in any medium or format, remix, transform and build upon the material for any purpose, even commercially. In exchange, you must give appropriate credit to Vecteezy (http://www.vecteezy.com/). | |
| For more free resources, visit http://graphicflip.com/ | |
| - Monika Ratan |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment