How to center text inside a SVG g element?
10,005
Finally the issue was with y="50"
in the text.pointIndex
, change it to y="5"
to get it vertically centered
.point circle {
cursor: pointer;
text-align: center;
fill: #E2137E;
r: 10;
stroke: #333;
stroke-width: 2px;
}
<svg width="400" height="400">
<g class="point" transform="translate(225,217)">
<circle></circle>
<text class="pointIndex" y="5">
<tspan text-anchor="middle">10</tspan>
</text>
</g>
</svg>
Comments
-
alexchenco almost 2 years
I tried this http://jsfiddle.net/helderdarocha/e4bAh/. But it's only centered horizontally. This is the code and JSFiddle:
<svg width="400" height="400"> <g class="point" transform="translate(225,217)"> <circle></circle> <text class="pointIndex" y="50"> <tspan text-anchor="middle">10</tspan> </text> </g> </svg> <style> .point circle { cursor: pointer; text-align: center; fill: #E2137E; r: 10; stroke: #333; stroke-width: 2px; } </style>
How to center
.pointIndex
inside.point
?