在没有 CSS 的情况下增加 SVG 的大小答案

【问题标题】：Increase size of SVG without CSS在没有 CSS 的情况下增加 SVG 的大小
【发布时间】：2021-02-23 04:08:52
【问题描述】：

我有以下 SVG 文件，其中包含一条折线

<?xml version="1.0" encoding="utf-8"?>
<svg 
    width="280"
    height="280"
    viewBox="0 0 140 140"
    stroke="blue"
    fill="none">
<polyline points="21,14 18,14 15,7 10,17 7,11 5,14 3,14" />
</svg>

原始大小是 48x48px，我正在尝试将 SVG 的总比例增加到 280x280px（在我将其发送到 PNG 渲染之前）。

我尝试增加宽度、高度和 viewBox 参数，但是折线的大小显然不符合。有没有办法做到这一点？

【问题讨论】：

我会改用这个 viewBox：viewBox="3 7 18 10"
这就是诀窍，愿意解释并为此创建答案吗？这个结果也可以通过动态（使用代码？）方式实现，因为我将有许多 svg 将通过此代码。

标签： php html css svg

【解决方案1】：

在您的示例中，我为 svg 元素添加了边框。现在您可以看到正在发生的事情。与视口相比，图形很小。为了使它正确，您需要知道多边形let bb = document.querySelector("polyline").getBBox(); 的边界框并将结果用作viewBox 的值

let bb = document.querySelector("polyline").getBBox();
console.log(bb)

svg{border:solid}

<?xml version="1.0" encoding="utf-8"?>
<svg 
    width="280"
    height="280"
    viewBox="0 0 140 140"
    stroke="blue"
    fill="none">
<polyline points="21,14 18,14 15,7 10,17 7,11 5,14 3,14" />
</svg>

折线的边界框是：

{
  "x": 3,
  "y": 7,
  "width": 18,
  "height": 10
}

我正在使用这些值来构建 viewBox 的新值。

接下来是我将 viewBox 更改为 viewBox="3 7 18 10" 的示例。请注意，现在 svg 元素具有不同的纵横比。 svg 元素是方形的，而视口的宽度为 18，高度为 10。默认情况下，preserveAspectRatio 的值是xMidYMid，将元素 viewBox 的中点 Y 值与视口的中点 Y 值对齐。

svg{border:solid}

<?xml version="1.0" encoding="utf-8"?>
<svg 
    width="280"
    height="280"
    viewBox="3 7 18 10"
    stroke="blue"
    fill="none">
<polyline points="21,14 18,14 15,7 10,17 7,11 5,14 3,14" />
</svg>

【讨论】：

谢谢！那么要计算我需要javascript的边界框吗？由于我的 svg 解析是在服务器 (php) 上进行的。
取决于 SVG。在这个<polyline> 的情况下，你没有。您可以通过查看它看到最小和最大 X 坐标是（3 和 21），以及 Y 坐标（7 和 17）。对于其他元素，例如<path>，使用 PHP 会更棘手。但我不知道 PHP 可以使用哪种 SVG 解析库。你也许可以调用一个单独的程序——例如——使用像 Batik 这样的库的 C++。