如何在响应的SVG中保持文本大小？

Question

我试图在响应性d3.js图表中保持文本元素的大小。

我已经在svg元素上设置了viewBox和preserveAspectRatio属性以获得响应性，但是这扩展了包括文本在内的所有svg元素。我尝试将字体大小设置为属性和CSS，但是文本元素继续与图表的其余部分一起缩放。

响应是通过以下方式完成的：

.attr("width", '100%')
.attr("height", '100%')
.attr('viewBox','0 0 600 300')
.attr('preserveAspectRatio','xMinYMin')

图表中的一个小摆设是：https://jsfiddle.net/w4x97nv0/1/

在缩放其他svg元素的同时，修复文本字体大小的最佳方法是什么？

Answer 1

你的问题有点奇怪:字体大小实际上一直是不变的，10 is。由于设置了SVG viewBox，所发生的事情是SVG正在扩展到它的容器。

因此，通过要求保持字体大小不变，在我看来，您实际上是在问如何更改 it！我的意思是，更改它以保持屏幕上相同的外观大小，而不管SVG的大小。

如果这是正确的，您可以在"resize"侦听器中执行一个简单的数学。如下所示：

d3.select(window).on("resize", function() {
    const newWidth = d3.select("svg").style("width");
    const newFontSize = 10 * (600 / parseInt(newWidth));
    d3.selectAll(".tick").select("text")
        .style("font-size", newFontSize)
});

如您所见，我们得到SVG的新宽度，并使用600作为原始宽度，计算新的字体大小。这不是一个很好的效果，从视觉上讲，我也不知道你为什么要那样做。

下面是更改后的JSFiddle：https://jsfiddle.net/2vk1dqtz/