如何在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添加到您的問題中。