How to add a label next to a generated SVG angle between two lines

Question

I've created a function that will generate an SVG image with two lines and the curve of the angle between them. But I can't get the angle label to stay next to the angle. Because the SVG element itself has been flipped to simulated cartesian coordinates, the next needs to be flipped upside down again

The code is here: https://jsfiddle.net/wisehog/3s0g25vc/1/

I've tried using transform origin, translate and scale. But each time the angle label ends of the page. At the moment I tried setting the transform origin to the x and y coordinates of the text element and then tried to transform and scale it in order to flip it:

const angleText = 
            area 
            .append('text')
                .text(`${midAngleDegrees}°`)    
                .attr('x', `${x + (angleRadius * Math.cos(midAnglePi))}`)    
                .attr('y', `${y + (angleRadius * Math.sin(midAnglePi))}`)
                .attr('font-size', '0.8em')

const xOrigin = $('text')[0].attributes[0].value;
        const yOrigin = $('text')[0].attributes[1].value;

        angleText
            .attr('transform-origin', `${xOrigin} ${yOrigin}`)
            .attr('transform', `translate(0 ${yOrigin-10}) scale(1, -1)`)

Any help or hints would be appreciated.

Answer 1

Why not just to add some offset (10px for example) to each x and y coordinates for the label:

const angleText = 
        area 
        .append('text')
            .text(`${midAngleDegrees}°`)    
            .attr('x', `${x + (angleRadius * Math.cos(midAnglePi)) + 10}`) // 10px offset  
            .attr('y', `${y + (angleRadius * Math.sin(midAnglePi)) + 10}`) // the same
            .attr('font-size', '0.8em')

https://jsfiddle.net/3s0g25vc/18/