首页猿问在 HTML 视图框中缩放 SVG

在 HTML 视图框中缩放 SVG

Html5

婷婷同学_ 2023-10-30 20:50:16

我需要一些有关在 HTML 视图框中缩放 SVG 的帮助。我正在使用网站的 HTML 模板，并希望将模板的标准 SVG 图像更改为另一个图像。我无法让路径 d="something,something" 的新 SVG 正确缩放。我希望新的 SVG 图像能够正确地适合 91 x 91 视图框的中心。我在线查看了 SVG viewbox 系统，但无法理解它是如何工作的。我有一些 python 编码经验，但没什么太严重的，没有 HTML 经验。请帮忙，解释如下。标准 SVG 图像的代码如下：<div id="section-publications" class="o-container wow1 fadeIn" data-contentPosition="4"><div class="c-section-heading"> <svg class="c-section-heading__icon svg-icon" xmlns="http://www.w3.org/2000/svg" width="91" height="91" viewBox="0 0 91 91"> <rect class="svg-icon__border" x="0.5" y="0.5" width="90" height="90"/> </svg></div>看起来像这样：我想将 SVG 更改为不同的内容，例如握手（或至少是其他内容......）。我有一个 SVG 握手文件，如下所示：

查看完整描述

2 回答

手掌心

TA贡献1942条经验获得超3个赞

viewBox 的工作原理

其实很简单。

为了让浏览器缩放 SVG 内容以适应您指定的宽度和高度，它需要知道该内容有多大。

您可以通过属性来告诉它该内容有多大viewBox。a 中的值为viewBox：

<minimum X> <minimum Y> <width> <height>

假设您的内容是从 (10,20) 到 (80,80) 的正方形。完全符合该正方形的定义viewBox是：

viewBox="10 20 70 60"

这表示内容的左上角位于 10,20，宽度为 70，高度为 60。

这是一个图表来说明我的意思。

>!-- axes -->

<text x="45" y="87" text-anchor="middle">width = 70</text>

<text x="82" y="50">height = 60</text>

</g>

</svg>

现在浏览器知道 SVG 内容的边界，它可以计算如何缩放和定位该内容，使其适合您的视口。视口只是指页面上 SVG 绘制到的矩形。您可以使用width和来定义它height。

你的握手 SVG

显然，viewBox握手图标对于内容来说太大了。正因为如此，它的规模还不够大。我们需要找到与握手图标形状紧密配合的 viewBox。

但坚持住...

但我们有一个问题。您保留了之前图标中的方形形状。如果我们放大手的形状，矩形就会变得太大。解决您的问题的最简单的方法就是放大并重新定位其余内容以适合您的正方形：

.svg-icon__border {

fill: none;

stroke: red;

}

</g>

</svg>

调整viewBox

另一种选择是去掉正方形，这样你就不必担心它。计算一个比较合适的viewBox。然后您可以按照自己的喜好调整图标的大小和位置。如果您希望稍后恢复正方形，可以向其父容器添加边框样式。

那么我们如何确定正确的viewBox应该是什么？嗯，有几种方法可以做到这一点。

您可以通过手动更改值来进行实验
您可以将其加载到矢量或 SVG 编辑器中并使用其标尺
getBBox()您可以在 SVG 上使用 Javascript 方法。该getBBox()函数返回内容的边界。这些将有助于告知viewBox值应该是什么。

如果我们从 SVG 中删除正方形并使用最后一个方法，我们将得到边界框值：

{

"x": 0.0009997636079788208,

"y": 6.000142574310303,

"width": 31.998998641967773,

"height": 19.99785614013672

}

console.log(document.getElementById("test-svg").getBBox());

.svg-icon__border {

fill: none;

stroke: red;

}

</svg>

从这些值中我们可以看到我们的图标在 X 方向上覆盖了（大约）0 到 32，在 Y 方向上覆盖了 6 到 20。

由此可见，该图标的设计适合 32x32 SVG。所以让我们将其设置viewBox为：

viewBox="0 0 32 32"

这就是看起来的样子，仍然是width="91" height="91". 我还在 SVG 周围添加了绿色边框，作为我们删除的矩形的替代。

svg {

border: solid 1px green;

}

</svg>

下一步

现在我们有了“正确的”，viewBox您可以看到手正在按比例放大以填充我们的视口（和width）height区域。但这确实意味着原始图标周围的填充消失了。

要恢复此填充，您有以下几种选择：

将填充合并到viewBox. 您可以通过从<minimum X>和中的<minimum Y>值减去一个金额并向和中的值viewBox添加额外的值来完成此操作。例如，如果我们在 32x32 形状周围添加 16 个单位的填充，则调整后的结果为：<width><height>viewBox
视图框=“-16 -16 64 64”

演示：

svg {

border: solid 1px green;

}

</svg>

或者，您可以使用 CSS 样式来调整容器内新图标的大小和位置<div>。

演示：

div.icon-container {

display: inline-block;

padding: 23px;

border: solid 1px green;

}

div.icon-container svg {

width: 45px;

height: 45px;

}

</svg>

</div>

反对回复 2023-10-30

慕标5832272

TA贡献1966条经验获得超4个赞

您需要将握手包装在符号中，并为该符号提供 viewBox 属性。接下来，您使用该符号并为元素提供use所需的位置（x，y）和大小（宽度，高度）。

为了知道 viewBox 的值，我首先将握手包装在一个g元素中，并使用了该getBBox()方法。

</symbol>

</svg>

反对回复 2023-10-30

2 回答
0 关注
117 浏览

关注

添加回答

0/150

提交

取消

热搜

最近搜索清空

在 HTML 视图框中缩放 SVG

在 HTML 视图框中缩放 SVG

2 回答

viewBox 的工作原理

你的握手 SVG

但坚持住...

调整viewBox

下一步

添加回答