Html 使用路径元素调整svg图标的大小

我正在使用一个预先设计的菜单，它已被用于绘制图标

由于某些原因，我必须使用

路径
元素更改图标大小

现在，我想改变图标，我有自己的自定义图标；因此，我下载了一些网页的
svg
图标，但是我使用过的图标的大小与以前相同，即使我使用的是由我自己制作的大型svg图标

这是我的原始路径元素：

<path class="Shape" d="M4.7 29.3a3.7 3.7 0 1 1 0-7.3h63.2a3.7 3.7 0 1 1 0 7.3H4.7zM4.4 8a3.7 3.7 0 0 1 0-7.3h63.2a3.7 3.7 0 0 1 0 7.3H4.4zm0 42a3.7 3.7 0 0 1 0-7.3h63.2a3.7 3.7 0 1 1 0 7.3H4.4z"/>



这是我的svg结构：



我的帖子
新职位
删除的帖子
文件夹
推荐书
\
联系我们
安全设置
配置文件设置
联系人设置
撰写常见问题
阅读常见问题
一般常见问题
设置菜单
常见问题菜单
主菜单
更多菜单
主菜单
{{----}}
接下来，我将使用原始路径元素，而不是已经存在的图标。如果将图标放入
元素中，则可以使用任意大小的图标

我是如何做到的：
元素有一个
viewBox=“0-11 72”
请注意，符号是一个正方形的pf 72/72单位

使用符号时，可以为
元素赋予
x
和
y
属性，以将图标定位到需要的位置。您还可以为
元素指定一个
宽度
和一个
高度
属性，以根据需要调整其大小

为了获得
元素的值，可以对符号的内容使用
.getBBox（）
方法。在本例中，我做到了：
Shape.getBBox（）
。我希望有帮助

 <use xlink:href="#test" x="28" y="28" width="40" height="40" fill="white" />





我的帖子
SVG中的所有
path
数据（
d
属性）与在外部
SVG
元素上建立的viewBox维度相关，在这种情况下，
viewBox=“0 792 792”
。
d
属性给出相对于792x792空间的坐标。您可以想象，在这种情况下，为新图标提供正确的路径数据并不容易，主要是因为实现试图让所有这些图标位于同一个viewBox中。更常见的方法是使每个图标都有自己的
svg
元素，每个元素都有自己的viewBox，然后使用CSS在DOM中相对定位它们。