An example of SVG text along path.
Last active
October 23, 2019 21:41
-
-
Save nitaku/ffe4b7e4bda38358e298 to your computer and use it in GitHub Desktop.
Text along path
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
| svg = d3.select('svg') | |
| width = svg.node().getBoundingClientRect().width | |
| height = svg.node().getBoundingClientRect().height | |
| # translate the viewBox to have (0,0) at the center of the vis | |
| svg | |
| .attr | |
| viewBox: "#{-width/2} #{-height/2} #{width} #{height}" | |
| svg.append('path') | |
| .attr | |
| d: 'M-300 0 C0 -300 0 300 300 0' | |
| id: 'the_path' | |
| svg.append('text') | |
| .append('textPath') | |
| .attr | |
| 'xlink:href': '#the_path' | |
| startOffset: '50%' | |
| .append('tspan') | |
| .text('Hello Ground!') | |
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
| svg { | |
| background: white; | |
| } | |
| path { | |
| stroke-width: 4; | |
| stroke-opacity: 0.3; | |
| stroke: #333; | |
| fill: none; | |
| } | |
| text { | |
| fill: black; | |
| font-size: 64px; | |
| text-anchor: middle; | |
| } |
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> | |
| <meta charset="utf-8"> | |
| <meta name="description" content="Text along path" /> | |
| <title>Text along path</title> | |
| <link type="text/css" href="index.css" rel="stylesheet"/> | |
| <script src="http://d3js.org/d3.v3.min.js"></script> | |
| </head> | |
| <body> | |
| <svg height="500" width="960"></svg> | |
| <script src="index.js"></script> | |
| </body> | |
| </html> |
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
| (function() { | |
| var height, svg, width; | |
| svg = d3.select('svg'); | |
| width = svg.node().getBoundingClientRect().width; | |
| height = svg.node().getBoundingClientRect().height; | |
| svg.attr({ | |
| viewBox: "" + (-width / 2) + " " + (-height / 2) + " " + width + " " + height | |
| }); | |
| svg.append('path').attr({ | |
| d: 'M-300 0 C0 -300 0 300 300 0', | |
| id: 'the_path' | |
| }); | |
| svg.append('text').append('textPath').attr({ | |
| 'xlink:href': '#the_path', | |
| startOffset: '50%' | |
| }).append('tspan').text('Hello Ground!'); | |
| }).call(this); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment