html - 缩放 SVG 直到最大值

Question

很抱歉，我真的无法让它发挥作用，而且我找到的所有解决方案似乎都不适合我。

我正在绘制一个 svg 星形/五 Angular 星形，我希望它居中并缩放直到它填充大约 40% 的页面高度。

因为它是一个正方形图像，现在当窗口大小增加时，它只会缩放到巨大的尺寸并填充 2-3 个窗口高度。通常的最大宽度、最大高度似乎不适用于 svg，将其放入容器中也不是最佳选择。由于 css 太多，我让它保持更小，但下面的内容只会环绕并显示在它旁边而不是下面。简而言之，它无法像我希望的那样工作，而且我不知道如何解决这个问题。

        <svg class="simon-svg" viewbox="0 0 800 800">
          <g class="svg_button" class="clickable" id="sbtn0" cursor="pointer" pointer-events="all">
            <g class="svg-background">
              <path d="M50 275 L300 275 L250 425 Z" fill="red" stroke="black"/>
            </g>
          </g>
          <g class="svg_button" class="clickable" id="sbtn1" cursor="pointer" pointer-events="all">
            <g class="svg-background">
              <path d="M400 50 L300 275 L500 275 Z" fill="green"stroke="black"/>
            </g>
          </g>
          <g class="svg_button" class="clickable" id="sbtn2" cursor="pointer" pointer-events="all">
            <g class="svg-background">
              <path d="M500 275 L750 275 L550 425 Z" fill="blue"stroke="black"/>
            </g>
          </g>
          <g class="svg_button" class="clickable" id="sbtn3" cursor="pointer" pointer-events="all">
            <g class="svg-background">
              <path d="M650 700 L400 530 L550 425 Z" fill="orange"stroke="black"/>
            </g>
          </g>
          <g class="svg_button" class="clickable" id="sbtn4" cursor="pointer" pointer-events="all">
            <g class="svg-background">
              <path d="M175 700 L400 530 L250 425 Z" fill="turquoise"stroke="black"/>
            </g>
          </g>
        </svg>

Answer 1

我不确定我是否完全理解你的问题，但它对我来说似乎工作得很好:

svg {
  display: block;
  height: 40vh;
  margin: 0 auto;
}

<svg class="simon-svg" viewbox="0 0 800 800">
          <g class="svg_button" class="clickable" id="sbtn0" cursor="pointer" pointer-events="all">
            <g class="svg-background">
              <path d="M50 275 L300 275 L250 425 Z" fill="red" stroke="black"/>
            </g>
          </g>
          <g class="svg_button" class="clickable" id="sbtn1" cursor="pointer" pointer-events="all">
            <g class="svg-background">
              <path d="M400 50 L300 275 L500 275 Z" fill="green"stroke="black"/>
            </g>
          </g>
          <g class="svg_button" class="clickable" id="sbtn2" cursor="pointer" pointer-events="all">
            <g class="svg-background">
              <path d="M500 275 L750 275 L550 425 Z" fill="blue"stroke="black"/>
            </g>
          </g>
          <g class="svg_button" class="clickable" id="sbtn3" cursor="pointer" pointer-events="all">
            <g class="svg-background">
              <path d="M650 700 L400 530 L550 425 Z" fill="orange"stroke="black"/>
            </g>
          </g>
          <g class="svg_button" class="clickable" id="sbtn4" cursor="pointer" pointer-events="all">
            <g class="svg-background">
              <path d="M175 700 L400 530 L250 425 Z" fill="turquoise"stroke="black"/>
            </g>
          </g>
        </svg>
      
      lorem ipsum dolor sit