如何在 javascript 中为没有单位的 svg 设置字体大小

Question

我正在编辑 plotly.js 库源代码以具有可缩放的绘图，我设置了 viewBox 和 preserveAspectRatio（plotly.js 使用 d3 库）但是如果我不使用单位，字体大小会出现问题属性更改为 px

我已经尝试从控制台测试字体是否更改为没有单位使用此：

[...document.querySelectorAll('text')].forEach((text) => {
    text.style.fontSize = text.style.fontSize.replace('px', '')
});

但似乎如果你不使用单位，px 会自动添加。

我还尝试使用 rem 单位并在 html 上设置 62.5%，其中原始字体大小除以 10，但在调整绘图大小时它不会缩放。

还尝试了这个新的 CSS 类型的 OM API:

[...document.querySelectorAll('text')].forEach((text) => {
   var size = +text.style.fontSize.replace('px', '');
   text.attributeStyleMap.set('font-size', CSS.number(size))
});

但出现错误：

Failed to execute 'set' on 'StylePropertyMap': Invalid type for property

有没有从 javascript 或其他比例文本方式设置字体大小的解决方案？

Answer 1

在 svg 中每个样式属性都有相应的属性，因此您可以使用：

d3.select('text').attr('font-size', 10);

并且它会设置没有单位的字体大小。情节仍然没有扩展，但这就是问题所在。

Answer 2

在 SVG 中，没有单位说明符与使用 px 相同。所以 font-size: 10 和 font-size: 10px 意思是一样的。他们将表现相同。

我不知道为什么值没有单位对你很重要。听起来您认为这就是您的文本未缩放的原因。这不是原因。一定有别的事情发生了。如果您需要有关该问题的帮助，请在您的问题中添加 MCVE。

如何在 javascript 中为没有单位的 svg 设置字体大小

How to set font-size for svg without unit in javascript

javascript

css

svg

font-size