Question

我需要一些帮助来弄清楚如何在我的网页上显示调整SVG图形的大小。

以下是图片的两个屏幕截图，one shows the graphics on a desktop wide screen和other on a smartphone

我的问题是智能手机上的图形太小了。我怎样才能让它更大？我没有关于这个图形的响应性，只是我的网页中的普通SVG。所以我想可以做些什么，但我不知道到底是什么。

以下是SVG图形的开头：

<svg viewbox="0 0 1920 632" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet">
    <title>graphics</title>
    <g style="isolation:isolate">
        <g data-name="before animation starts" id="0482fa28-2c72-43bc-8627-b57f09f318d3">

<path id="main-oval" class="main-oval" d="M1354.63,260.62C1338.38,142.2,1144.68,71,922,101.54c-109.4,15-205.35,51.8-272.82,99.38-69.92,49.26-109.23,110-101,170.29,16.31,118.42,210,189.59,432.62,159.07,110.79-15.17,207.86-52.73,275.44-101.15C1324.59,380.18,1362.8,320.12,1354.63,260.62Z" data-name="oval"></path>...

由于

Answer 1

SVG中的属性名称区分大小写。因此viewbox应为viewBox。

可能还有其他事情要干，但我无法看到完整的SVG文件。

Answer 2

由于您的SVG具有viewBox属性而没有width和height属性，因此默认情况下会响应，并且会缩放以适合其父容器。

对于移动视图，它是父容器限制大小而不是SVG中的任何内容。尝试检查父容器的宽度，边距和填充，以确保它是100％宽，并且SVG将缩放以适应。

如果此后SVG仍然不太清晰，则需要使用CSS媒体查询修改图形以缩放和转换特定元素。这超出了问题的范围，所以我不会在这里讨论它。

如何调整SVG的大小调整？

2 个答案: