фиксированная ширина и высота объектов SVG

Question

Я хочу, чтобы у моего многоугольника и ширины пути были одинаковые ширина и высота на всех устройствах, например, высота 50 пикселей и ширина 50 пикселей, потому что они растянуты на мобильных устройствах или если есть другое решение.Я удалил некоторые классы 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>