|
<!DOCTYPE html> |
|
<html lang='en'> |
|
<head> |
|
<meta charset='utf-8'> |
|
<title> |
|
Curved Text in SVG |
|
</title> |
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script> |
|
<style type="text/css"> |
|
svg { |
|
display: block; |
|
margin: 0 auto; |
|
} |
|
svg circle { |
|
opacity: 0.6; |
|
} |
|
svg text { |
|
dominant-baseline: central; |
|
font-family: monospace; |
|
font-size: 24px; |
|
} |
|
svg text.centered { |
|
text-anchor: middle; |
|
} |
|
</style> |
|
</head> |
|
<body> |
|
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="864" height="450" viewbox="0 0 960 500"> |
|
<rect id="backgroundRect" width="960" height="500" x="0" y="0" fill="#ECECEC"></rect> |
|
<g class="thisIsAnExampleGroup"> |
|
<text x="125" y="130">{id: 'abc', value: 5}</text> |
|
<circle cx="810" cy="100" r="14.142135623730951" fill="#279191"></circle> |
|
<line x1="435" x2="735" y1="130" y2="100" stroke-width="1" stroke="black"></line> |
|
<text x="810" y="100" class="centered" fill="blue"><circle/></text> |
|
</g> |
|
<g class="thisIsAnExampleGroup"> |
|
<text x="125" y="210">{id: 'def', value: 10}</text> |
|
<circle cx="810" cy="200" r="20" fill="#279191"></circle> |
|
<line x1="445" x2="735" y1="210" y2="200" stroke-width="1" stroke="black"></line> |
|
<text x="810" y="200" class="centered" fill="blue"><circle/></text> |
|
</g> |
|
<g class="thisIsAnExampleGroup"> |
|
<text x="125" y="290">{id: 'ghi', value: 8}</text> |
|
<circle cx="810" cy="300" r="17.88854381999832" fill="#279191"></circle> |
|
<line x1="435" x2="735" y1="290" y2="300" stroke-width="1" stroke="black"></line> |
|
<text x="810" y="300" class="centered" fill="blue"><circle/></text> |
|
</g> |
|
<g class="thisIsAnExampleGroup"> |
|
<text x="125" y="370">{id: 'jkl', value: 3}</text> |
|
<circle cx="810" cy="400" r="10.95445115010332" fill="#279191"></circle> |
|
<line x1="435" x2="735" y1="370" y2="400" stroke-width="1" stroke="black"></line> |
|
<text x="810" y="400" class="centered" fill="blue"><circle/></text> |
|
</g> |
|
</svg> |
|
<script type="text/javascript"> |
|
d3.selectAll('.thisIsAnExampleGroup') |
|
.on('mouseover', function() { |
|
d3.select(this) |
|
.transition() |
|
.attr('transform', 'translate(0,' + -25 + ')'); |
|
}) |
|
.on('mouseout', function() { |
|
d3.select(this) |
|
.transition() |
|
.attr('transform', ''); |
|
}); |
|
</script> |
|
</body> |
|
</html> |
