title: How to add a label next to a generated SVG angle between two lines
body: <p>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</p>
  
  <p>The code is here: <a href="https://jsfiddle.net/wisehog/3s0g25vc/1/" rel="nofollow noreferrer">https://jsfiddle.net/wisehog/3s0g25vc/1/</a></p>
  
  <p>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:</p>
  
  <pre><code>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)`)
  </code></pre>
  
  <p>Any help or hints would be appreciated.</p>