Как установить размер шрифта для SVG без модуля в JavaScript - PullRequest
Новая
       7

Как установить размер шрифта для SVG без модуля в JavaScript

0 голосов
/ 08 июня 2018

Я редактирую исходный код библиотеки plotly.js, чтобы иметь масштабируемые графики, я устанавливаю viewBox и preserveAspectRatio (plotly.js использует библиотеку d3), но у меня есть проблема с размером шрифта, если я не использую единицу, свойство изменяется на px

Я пытался проверить с консоли, не изменился ли шрифт, чтобы не использовать юнит, используя это: 

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

, но кажется, что если вы не используете юнит, px добавляется автоматически.

Я также пытался использовать rem unit и установить 62,5% на html, где исходный размер шрифта делится на 10, но он не масштабируется при изменении размера графика.

Также пробовалэтот новый CSS API OM с типизацией: 

[...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, или другой способ пропорционального текста?

Ответы [ 2 ]

0 голосов
/ 08 июня 2018

В SVG указатель отсутствия единиц не отличается от использования px.Так что font-size: 10 и font-size: 10px означают одно и то же.Они будут вести себя одинаково.

Я не знаю, почему для вас важно, что значение не имеет единиц измерения.Похоже, вы думаете, что именно поэтому ваш текст не масштабируется.Это не будет, почему.Там должно быть что-то еще происходит.Если вам нужна помощь в решении этой проблемы, добавьте MCVE к вашему вопросу.

0 голосов
/ 08 июня 2018

в svg каждое свойство стиля имеет соответствующий атрибут, поэтому вы можете использовать: 

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

, и он будет устанавливать размер шрифта без единицы измерения.Сюжет еще не масштабируется, но это был вопрос.

...