svg text positioning, overlapping or two styles for same text element -
i have 2 different svg text elements aligned horizontally 1 other:
"title1", "20%" , "120.000" 3 independent svg objects.the 120.000 text element end anchored , 20% middle anchored.
what trying place 20% text appears on image setting same space between , 120.000 text. position of percentage set this:
canvas.append("text") .attr("transform", "translate(" + ((width/2) - width/4) + " ," + (height/2 - 10) + ")") .style("text-anchor", "end") .text(function(d) { return data.values[0].percent});
where "width" , "height" total width , height of svg element holds piechart
the problem comes when right value text big: percentage text overlaps:
i place 2 pieces of text in same text element 2 pieces of text have different styles.
do have suggestions on how fix this?
the 2 solutions i've thought of are
- to able set 2 different styles 2 parts of same text element
- some way (that don't know) calculate exact space occupied text on right.
use a single <text>
element 2 <tspan>
children can individually style different <tspan>
elements.
Comments
Post a Comment