在HTML中调整SVG大小

Question

我发现这个问题在HTML中调整SVG的大小，但答案(删除<svg>width和height属性并调整viewBox属性的大小)没有正确地重新调整我的SVG文件。

这是我从Looka购买的徽标文件，我想开始使用它，但我被如何重新缩放/调整它的大小难住了。

<?xml version="1.0" encoding="UTF-8"?>
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1"
width="3171.4285714285716"
height="2645.5238095238096"
viewBox="0 -25.714285714285715 3171.4285714285716 2645.5238095238096">
<rect fill="#67b231" width="3171.4285714285716" height="2645.5238095238096" />
<g transform="scale(8.571428571428571) translate(10, 10)">
<defs id="SvgjsDefs2369" />
<g transform="matrix(...)"></g>
<g transform="matrix(...)"></g>
<g transform="matrix(...)"></g>
</g>
</svg>

如果我删除<svg>width和height,viewBox保持大小。

如果我也减少viewBox，图像保持相同的大小，我认为(!?)因为子<rect>也包含width和height属性。

但是，如果我删除<rect>width和height属性，结果是类似大小的空白(没有徽标)。

1. 我该如何处理任意缩放|调整图像的大小?
2. 当我调整viewBox时，我应该保留width:height的比例吗?
3. viewBox应该有一个正的y位置(目前是-25.714...)吗?

Answer 1

作为一个有用的代码片段如何?在没有编辑<svg>代码的情况下，我已经设置了它，以便您可以将任何<svg>包装在svgSize类的div中，如下所示:

<div class="svgSize"><svg>...</svg></div>

然后使用内联样式，您可以使用任何值传递--svgHeight或--svgWidth，例如--svgHeight: 100px和SVG将调整大小到给定的值，同时保持其长宽比。如果你不传递任何一个值，它将默认为auto，它将调整大小以填充父

爱上CSS自定义属性

.svgSize {
display: inline-flex;
height: var(--svgHeight, auto);
width: var(--svgWidth, auto);
}
.svgSize svg {
height: auto; width: auto;
max-height: 100%; max-width: 100%;
}

<div class="svgSize" style="--svgWidth: 5rem">
<?xml version="1.0" encoding="UTF-8"?>
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1"
width="3171.4285714285716"
height="2645.5238095238096"
viewBox="0 -25.714285714285715 3171.4285714285716 2645.5238095238096">
<rect fill="#67b231" width="3171.4285714285716" height="2645.5238095238096" />
<g transform="scale(8.571428571428571) translate(10, 10)">
<defs id="SvgjsDefs2369" />
<g transform="matrix(...)"></g>
<g transform="matrix(...)"></g>
<g transform="matrix(...)"></g>
</g>
</svg>
</div>
<div class="svgSize" style="--svgHeight: 15rem">
<?xml version="1.0" encoding="UTF-8"?>
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1"
width="3171.4285714285716"
height="2645.5238095238096"
viewBox="0 -25.714285714285715 3171.4285714285716 2645.5238095238096">
<rect fill="#67b231" width="3171.4285714285716" height="2645.5238095238096" />
<g transform="scale(8.571428571428571) translate(10, 10)">
<defs id="SvgjsDefs2369" />
<g transform="matrix(...)"></g>
<g transform="matrix(...)"></g>
<g transform="matrix(...)"></g>
</g>
</svg>
</div>
<div class="svgSize" style="">
<?xml version="1.0" encoding="UTF-8"?>
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1"
width="3171.4285714285716"
height="2645.5238095238096"
viewBox="0 -25.714285714285715 3171.4285714285716 2645.5238095238096">
<rect fill="#67b231" width="3171.4285714285716" height="2645.5238095238096" />
<g transform="scale(8.571428571428571) translate(10, 10)">
<defs id="SvgjsDefs2369" />
<g transform="matrix(...)"></g>
<g transform="matrix(...)"></g>
<g transform="matrix(...)"></g>
</g>
</svg>
</div>