固定svg对象的宽度和高度

Question

我想让我的多边形圆和路径宽度在所有设备上保持相同的宽度和高度，例如50px高度和50px宽度，因为它们在移动设备上伸展，或者如果有其他解决方案。我删除了一些css类和其他svg对象，这样代码就可以看起来很简单。

    <svg preserveAspectRatio="none" id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 734 414">
<g id="bg">
        <rect class="cls-1" x="-0.01" y="0.96" width="733.99" height="92.47" />
        <g id="bg_elements">
            <path class="cls-2" d="M734,414H0V81.84s56,2.53,74.56,2.73c22,.23,64.67-3,86.71-2.86,24.83.18,109.22,6.38,136.17,7.46,45.2,1.8,105-5.57,149.73-7.27,39.45-1.51,118.14,3.66,157.5,3.66,32.42,0,129.33-5.29,129.33-5.29Z" />
            <g id="elements">
                <polygon id="triangle" class="cls-3" points="32.27 247.14 23.13 224.36 7.97 243.67 32.27 247.14" />
                <circle id="ellipse" class="cls-4" cx="317.06" cy="160.33" r="12.53" />
                <polygon id="triangle_s" class="cls-5" points="460.08 371.37 448.65 376.05 438.89 383.61 440.56 371.37 438.89 359.14 448.65 366.7 460.08 371.37" />
                <path id="plus" class="cls-6" d="M651.11,227l-13.62,21.69m-4- 
   17.66,21.7,13.63" />
            </g>
        </g>
    </g>
</svg>

Answer 1

你的要求不明确。但也许你想要的是，让SVG覆盖整个视区，同时保持未拉伸/未挤压。即。HTML元素的background-size: cover等效项。

如果是这样，那么你想要的是：

preserveAspectRatio="xMidYMid slice"

这将放大或缩小SVG的大小，以便它是仍然完全覆盖整个视口的最小大小。但是，您最终可能会看到SVG的某些部分被修剪掉了。

​

svg {
  width: 400px;
  height: 300px;
}

path {
  fill: red;
}

circle {
  fill: blue;
}

polygon {
  fill: yellow;
}

<svg preserveAspectRatio="xMidYMid slice" viewBox="0 0 734 414">
<g id="bg">
        <rect class="cls-1" x="-0.01" y="0.96" width="733.99" height="92.47" />
        <g id="bg_elements">
            <path class="cls-2" d="M734,414H0V81.84s56,2.53,74.56,2.73c22,.23,64.67-3,86.71-2.86,24.83.18,109.22,6.38,136.17,7.46,45.2,1.8,105-5.57,149.73-7.27,39.45-1.51,118.14,3.66,157.5,3.66,32.42,0,129.33-5.29,129.33-5.29Z" />
            <g id="elements">
                <polygon id="triangle" class="cls-3" points="32.27 247.14 23.13 224.36 7.97 243.67 32.27 247.14" />
                <circle id="ellipse" class="cls-4" cx="317.06" cy="160.33" r="12.53" />
                <polygon id="triangle_s" class="cls-5" points="460.08 371.37 448.65 376.05 438.89 383.61 440.56 371.37 438.89 359.14 448.65 366.7 460.08 371.37" />
                <path id="plus" class="cls-6" d="M651.11,227l-13.62,21.69m-4- 
   17.66,21.7,13.63" />
            </g>
        </g>
    </g>
</svg>

​