JohnDelacour/index.html

## 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>

## 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;
}
	<!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>
	#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;
	}