在使用jQuery設置SVG tspan居中時,我們可以采用以下步驟:
// 獲取所有的tspan元素 var tspans = $('tspan'); // 循環遍歷每一個tspan tspans.each(function() { var tspan = $(this); // 獲取tspan的文本內容 var text = tspan.text(); // 獲取tspan的寬度和高度 var width = tspan.get(0).getBoundingClientRect().width; var height = tspan.get(0).getBoundingClientRect().height; // 獲取父容器的寬度和高度 var parentWidth = tspan.parent().get(0).getBoundingClientRect().width; var parentHeight = tspan.parent().get(0).getBoundingClientRect().height; // 計算tspan的水平和垂直偏移量 var dx = (parentWidth - width) / 2; var dy = (parentHeight - height) / 2; // 設置tspan的偏移量 tspan.attr('dx', dx); tspan.attr('dy', dy); });
以上代碼可以實現將所有的tspan元素居中顯示。我們首先使用jQuery選擇器獲取所有的tspan元素,然后循環遍歷每一個tspan。在循環中,我們通過getBoundingClientRect()方法獲取了tspan和它的父容器的寬度和高度,以及tspan自身的寬度和高度。然后通過計算,得出tspan的水平和垂直偏移量,并設置到tspan元素的dx和dy屬性中即可。