svg(d3)相关方法

在 SVG 中获取文字元素宽度

因为 svg 中是一个一个元素组成的，和原生 DOM 元素差不多，所以就可使用获取普通元素宽度的API， getComputedTextLength 、getBoundingClientRect。

let $text = document.querySelector('.text')
// 方法 1
let w = $text.getComputedTextLength()
// 方法 2
let w = $text.getBoundingClientRect().width

在 Canvas 中获取文字元素宽度

Canvas 相当于是一个黑盒，内部没有元素的概念，所以就不能使用原生DOM提供的方法，但是可以使用 Canvas 提供的API， measureText 。

const c = document.getElementById("myCanvas")
const ctx = c.getContext("2d")
ctx.font = "30px Arial"
const txt = "Hello World"
let w = ctx.measureText(txt).width