我试过这个http://jsfiddle.net/helderdarocha/e4bAh/。但它只是水平居中。这是代码和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>
如何将.pointIndex
置于.point
内?
答案 0 :(得分:5)
最后问题是y="50"
中的text.pointIndex
,将其更改为y="5"
以使其垂直居中
.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>