Question

我创建了一个函数，它将生成一条SVG图像，其中包含两条直线和它们之间的角度曲线。但我无法让角度标签保持在角度旁边。因为SVG元素本身已被翻转为模拟笛卡尔坐标，所以下一个需要再次颠倒翻转

代码在这里：https://jsfiddle.net/wisehog/3s0g25vc/1/

我尝试过使用变换原点，翻译和缩放。但每次角度标签结束页面。目前我尝试将变换原点设置为文本元素的x和y坐标，然后尝试对其进行变换和缩放以便翻转它：

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)`)

任何帮助或提示都将不胜感激。

Answer 1

为什么不只是为标签的每个x和y坐标添加一些偏移量（例如10px）：

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/

如何在两行之间生成的SVG角度旁边添加标签

1 个答案: