Skip to content

Instantly share code, notes, and snippets.

@JohnDelacour

JohnDelacour/index.html

Last active December 17, 2015 21:39
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save JohnDelacour/5676636 to your computer and use it in GitHub Desktop.
Save JohnDelacour/5676636 to your computer and use it in GitHub Desktop.
Download ZIP
Text in SVG
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Text in SVG</title>
<script src="http://d3js.org/d3.v3.min.js"></script>
<link type="text/css" href="x.css" rel="stylesheet">
</head>
<script>
// Change the size here to see it wrap
var w = 300
var h = 300;
var text_01 = "“I can’t believe I’ve been passed over for Long John Silver,” said Mr. Molesley. The lawn introduced the doctor. A poor man made sport of Highclere Castle. “Well we could always start with Mrs Crawley and Lady Grantham,” informed Mrs. Levinson. “Not worse than a maid serving a duke,” argued Mr. Mason."
var html = d3.select("html");
var div_01 = html.append("div") .attr("id", "div_01")
.style({width: w + "px", height: h + "px"});
var svg = div_01.append("svg")
.attr({width: w, height: h});
var circle_01 = svg.append("circle") .attr("id", "circle_01")
.attr({cx: w/2, cy: h/2, r: Math.min(w, h)/2});
var div_02 = html.append("div") .attr("id", "div_02")
.style({width: w + "px", height: h + "px"})
.text(text_01);
</script>
</html>
Raw
x.css
#div_01 {
background-color: #fff;
}
#div_02 {
position: absolute;
left: 0em;
top: 0em;
text-align:justify;
font-size: 14pt;
}
#circle_01 {
fill: none;
stroke: dodgerblue;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment