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覆盖整个视口，同时仍保持未拉伸/未压缩的状态。就是等同于background-size: cover的HTML元素。

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

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>

SVG对象的固定宽度和高度

1 个答案: