如何在响应式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元素的同时，最好的方法是如何固定文本的字体大小呢？

- user3046995

---

我认为你需要明确设置刻度样式，否则它们会从父级继承。 - Sterling Archer

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/

- Gerardo Furtado

---

“我不确定你为什么想要那个”：是因为文本的可访问性与图表的其余部分不同吗？例如，如果将图表调整为非常小，您可能希望条形/等变小，但标签保持相同，以便它们可读。 - User