我尝试翻译我的svg文本（轴标签），以便我可以将它与svg容器居中。我尝试了以下代码：
svg.append("text") .attr("x", 100) .attr("y",100) .attr("transform", "translate(-50%, -50%)") .text("any text");
而且什么也没发生。其他的SVG元素被翻译没有问题，但是，文本没有从它原来的位置移动。什么是错误的，什么是正确的方式来翻译SVG文本？
kx1ctssn1#
从传递给translate的参数中删除%符号：
translate
%
svg.append("text") .attr("x", 100) .attr("y", 100) .attr("transform", "translate(-50, -50)") .text("any text");
您可以查看MDN文档。
lsmd5eda2#
D3版本6 -元素的工作示例
const fontSize = 1.714em; innerCircleText.append('text') .attr('text-anchor', 'middle') .style('font-size', `${fontSize}em`) .style('transform', `translate(0, ${0.5 / fontSize}em)`) .text('24')
这是用来稍微移动文本更接近中心的字体大小左右移动了一点从中间。注意：如果我在这个.style（'transform'，translate(0, ${0.5 / fontSize}em)）中省略了“em”浏览器不会使用它。但是如果我让它开着，并且0没有度量，这就是浏览器中显示的内容...转换：转换（0 px，0.291715em）在变形的情况下。
translate(0, ${0.5 / fontSize}em)
2条答案
按热度按时间kx1ctssn1#
从传递给
translate的参数中删除%符号：您可以查看MDN文档。
lsmd5eda2#
D3版本6 -元素的工作示例
这是用来稍微移动文本更接近中心的字体大小左右移动了一点从中间。
注意：如果我在这个.style（'transform'，
translate(0, ${0.5 / fontSize}em)）中省略了“em”浏览器不会使用它。但是如果我让它开着，并且0没有度量，这就是浏览器中显示的内容...转换：转换（0 px，0.291715em）
在变形的情况下。