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

Question

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

我已在 svg 元素上设置 viewBox 和preserveAspectRatio 属性以获得响应能力，但是这会缩放所有 svg 元素（包括文本）。我尝试将字体大小设置为属性和 CSS，但文本元素继续随图表的其余部分缩放。

响应能力通过以下方式完成：

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

图表的 jsfiddle 在这里：https://jsfiddle.net/w4x97nv0/1/

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

Answer 1

你的问题有点奇怪：字体大小实际上一直是恒定的，10px。自从您设置 SVG 以来viewBox，发生的情况是 SVG 正在拉伸到其容器。

因此，通过要求保持字体大小相同，在我看来，您实际上是在问如何更改它！我的意思是，更改它以在屏幕上保持相同的外观尺寸，无论 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/