Как преобразовать ширину SVG из процентов в пиксели?

Question

Я создал векторное изображение и установил процент ширины и высоты на 100%, вот так:

var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
var svgNS = svg.namespaceURI;
svg.setAttribute('id', 'idsvg');
svg.setAttribute('width', '100%');
svg.setAttribute('height', '100%');

Теперь я хочу создать прямоугольник с позицией «100% - 20 пикселей», но он не работает, потому что 100% - это не число. Как я могу решить эту проблему?

Answer 1

Для этого вы можете использовать calc(). Это позволит вам выполнять вычисления при указании значений свойств CSS.

Таким образом, ваш код должен быть примерно таким:

var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
var svgNS = svg.namespaceURI;
svg.setAttribute('id', 'idsvg');
svg.setAttribute('width', 'calc(100% - 20px)');
svg.setAttribute('height', '100%');

ПРИМЕЧАНИЕ: Имейте в виду, вы не можете использовать calc(100% - 20px) вместо height в вашем конкретном случае, потому что результат будет неизвестен. Так что лучше использовать calc(100vh - 20px) или 100%.