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

【问题标题】：How to maintain text size in a responsive SVG?如何在响应式 SVG 中保持文本大小？
【发布时间】：2019-08-24 03:26:06
【问题描述】：

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

我已经在 svg 元素上设置了 viewBox 和 preserveAspectRatio 属性以获得响应性，但是这会缩放包括文本在内的所有 svg 元素。我尝试将 font-size 设置为属性和 CSS，但文本元素继续随着图表的其余部分缩放。

响应性通过以下方式完成：

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

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

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

【问题讨论】：

我认为您必须明确设置刻度样式，否则它们会从父级继承

标签： javascript d3.js svg

【解决方案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/

【讨论】：