Positioning element next to another in SVG - svg

Question

This is what I want to achieve:
The number should be centered horizontally in the middle, and the percentage symbol should be shown next to it.
I'd prefer not to hardcode any values, especially since I've got similar use cases to this where what I want to center is user defined text and not just a number with one or two digits. I could read the metrics of the .percentage container using JavaScript, but users will be able to choose their own webfont and I'd prefer to do this purely in SVG if possible instead of having to deal with detecting when the webfont has finished loading.
This is what I've got so far:
.percentage__value {
font-size: 80px;
}
.percentage__symbol {
font-size: 20px;
}
<svg width="260" height="260">
<g >
<path
fill="skyblue"
transform="translate(130,130)"
d="M0,130A130,130 0 1,1 0,-130A130,130 0 1,1 0,130M0,105A105,105 0 1,0 0,-105A105,105 0 1,0 0,105Z">
</path>
<path stroke="purple" d="M130 0 v 260 Z" stroke-width="2px"></path>
<text class="percentage" x="130" y="130" text-anchor="middle">
<tspan class="percentage__value" alignment-baseline="middle">93</tspan>
<tspan class="percentage__symbol" alignment-baseline="middle">%</tspan>
</text>
</g>
</svg>
If I were to do this using HTML and CSS I'd just do something like:
.percentage {
position: relative;
}
.percentage__symbol {
position: absolute;
...
}
One hacky way I can solve this is to add a .percentage__symbol on either side of the number and hide the first one, but that breaks text selection.
I'm using d3.js to generate the SVG, in case that's useful.

Answer 1

The attribute alignment-baseline is not supported by many browsers. But what you can do: define a horizontal path and enclose the tspan element with textPath element, defining the startOffset="50%" for the first tspan and e.g. 70% for the second one.
See http://jsfiddle.net/2e7opjxe/1/
There is another solution without textPath, just define the x,y coordinates for both tspan elements.
See http://jsfiddle.net/2e7opjxe/3/