时间戳

首页 > 解决方案 > 如何将 SVG 的宽度从百分比转换为像素？

javascript - 如何将 SVG 的宽度从百分比转换为像素？

问题描述

我创建了一个矢量图像并将宽度和高度百分比设置为 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% - 20px”的矩形，但它不起作用，因为 100% 不是数字。我该如何解决这个问题？

标签： javascripthtmlsvg

解决方案

为此，您可以使用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)for height，因为结果将是未知的。所以calc(100vh - 20px)还是100%自己用比较好。

推荐阅读