使SVG具有回應性的問題

我試圖讓svg適應螢屏的寬度，但不知為何，它堅持在螢屏縮小時保持相同的寬度。我試過了。(試圖調整svg影像的大小)

但它仍然不允許我使元素適合螢屏，并且不從其原始的svg容器中溢位。

svg {
  width : 100%;
  height : auto;
  background : 黃色
  }
svg g {
  background : 綠色。
  }
.home-wrapper { 
  background : 紅色。
  }

.cls-1 {
 填充 : 無。
 行程 :#0d1738;
 stroke-width : 3px;
}
.cls-2 {
 fill : #0d1738bb;
}
.cls-4 {
 fill : #3d4df3;
}
.cls-3 {
  字體大小 : 38px;
  font-family : TitilliumWeb-SemiBoldTitillium Web。
  font-weight : 600;
  }
.cls-4 {
  字體大小 : 20px;
  font-family : TitilliumWeb-Regular,Titillium Web;
  }

<div class="home-wrapper"> /span>
  <svg xmlns="http://www. w3.org/2000/svg" viewbox="0 0 260 245" > 
    <defs></defs> 
    < g id="Grupo_209" stroke-width="100%" data-name="Grupo 209" transform="translate(-78 -2163. 155)">
      < path id="Línea_51" data-name="Línea 51" class="cls-1" transform="translate（79. 5 2455.191）" d="M0 0h757"/>
      < path id="Trazado_33" data-name="Trazado 33" class="cls-1" d="M742 2283。 825v-60.237" transform="translate(-662.126 -60.434)"/> 
      < path id="Trazado_29" data-name="Trazado 29" class="cls-1" d="M305。 806 2278.306h803.112" transform="translate(-91.918 -13.804)"/> 
      < g id="Grupo_116" data- name="Grupo 116" transform="translate（0 1276. 691)">
        < path id="Polígono_21" data-name="Polígono 21" class="cls-2" d="M120。 75 0 161 70l-40.25 70h-80.5L0 70 40.25 0z" transform="translate(306 917.311)"/>
        < g id="Grupo_110"  data- name="Grupo 110" transform="translate(-33 -1。 92)">
          < text id="_4430"/span> data-name="4430" class="cls-3" transform="translate（420 982. 231)"><tspan x="-42。 56" y="0"> 2< /tspan></text>
          < text id="USUARIOS"  class="cls-4" transform="translate(420 1020. 231)"><tspan x="-44。 83" y="0"> U< /tspan></text>
        </g>/span>
      </g>/span>
      < g id="Grupo_115"  data- name="Grupo 115" transform="translate（3 1276. 691)">
        < path id="Polígono_30" data-name="Polígono 30" class="cls-2" d="M120。 75 0 161 70l-40.25 70h-80.5L0 70 40.25 0z" transform="translate(659 917.311)"/> 
        < g id="Grupo_111"  data- name="Grupo 111" transform="translate（-2 -71. 5)">
          < text id="_775"/span> data-name="775" class="cls-3" transform="translate（742 1051. 811)"><tspan x="-31。 92" y="0">5< /tspan></text>
          < text id="CURSOS"/span> class="cls-4" transform="translate(742 1089. 811)"><tspan x="-35。 48" y="0">C< /tspan></text>
        </g>/span>
      </g>/span>
      < g id="Grupo_114"  data- name="Grupo 114" transform="translate（0 1276. 691)">
        < path id="Polígono_31" data-name="Polígono 31" class="cls-2" d="M120。 75 0 161 70l-40.25 70h-80.5L0 70 40.25 0z" transform="translate(1017 917.311)"/> 
        < g id="Grupo_112"  data- name="Grupo 112" transform="translate(50 -71. 5)">
          < text id="_4"/span> data-name="4" class="cls-3" transform="translate(1048 1051. 811)"><tspan x="-10。 64" y="0">4< /tspan></text>
          < text id="PAíSES"/span> class="cls-4" transform="translate(1048 1089. 811)"><tspan x="-30. 38" y="0"> P< tspan></text>
        </g>/span>
      </g>/span>
      < path id="Polígono_22" data-name="Polígono 22" class="cls-2" D="m141 0 47 82- 47 82H47L0 82 47 0z" transform="translate（86 2399. 502)"/>
      < path id="Polígono_23" data-name="Polígono 23" class="cls-2" D="m141 0 47 82- 47 82H47L0 82 47 0z" transform="translate（495 2399. 502)"/>
      < path id="Línea_50" data-name="Línea 50" class="cls-1" transform="translate（79. 5 2302.191）" d="M0 0v153"/>
    </g>/span>
  </svg>/span>
</div>/span> 

uj5u.com熱心網友回復：

在我看來，你的viewbox是錯誤的，它應該是viewbox="-20 -20 1130 440"

.home-wrapper {
  background : 紅色。
  margin : 1em;
  padding : 0;
  font-size : 0;
  }
svg {
  width : 100%;
  height : auto;
  background : 黃色。
  }
.cls-1 {
  填充 : 無。
  描邊。#0d1738;
  stroke-width : 3px;
  }
.cls-2 {
  fill : #0d1738bb;
  }
.cls-4 {
  fill : #3d4df3;
  }
.cls-3 {
  字體大小 : 38px;
  font-family : TitilliumWeb-SemiBoldTitillium Web。
  font-weight : 600;
  }
.cls-4 {
  字體大小 : 20px;
  font-family : TitilliumWeb-Regular,Titillium Web;
  }

<div class="home-wrapper"> /span>
  <svg xmlns="http://www.w3. org/2000/svg" viewbox="-20 -20 1130 440"> <! -- width="1100" height="400.347"-->
    <defs></defs> 
    < g id="Grupo_209" stroke-width="100%" data-name="Grupo 209" transform="translate(-78 -2163. 155)">
      < path id="Línea_51" data-name="Línea 51" class="cls-1" transform="translate（79. 5 2455.191）" d="M0 0h757"/>
      < path id="Trazado_33" data-name="Trazado 33" class="cls-1" d="M742 2283。 825v-60.237" transform="translate(-662.126 -60.434)"/> 
      < path id="Trazado_29" data-name="Trazado 29" class="cls-1" d="M305。 806 2278.306h803.112" transform="translate(-91.918 -13.804)"/> 
      < g id="Grupo_116" data- name="Grupo 116" transform="translate（0 1276. 691)">
        < path id="Polígono_21" data-name="Polígono 21" class="cls-2" d="M120。 75 0 161 70l-40.25 70h-80.5L0 70 40.25 0z" transform="translate(306 917.311)"/>
        < g id="Grupo_110"  data- name="Grupo 110" transform="translate(-33 -1。 92)">
          < text id="_4430"/span> data-name="4430" class="cls-3" transform="translate（420 982. 231)"><tspan x="-42。 56" y="0"> 2< /tspan></text>
          < text id="USUARIOS"  class="cls-4" transform="translate(420 1020. 231)"><tspan x="-44。 83" y="0"> U< /tspan></text>
        </g>/span>
      </g>/span>
      < g id="Grupo_115"  data- name="Grupo 115" transform="translate（3 1276. 691)">
        < path id="Polígono_30" data-name="Polígono 30" class="cls-2" d="M120。 75 0 161 70l-40.25 70h-80.5L0 70 40.25 0z" transform="translate(659 917.311)"/> 
        < g id="Grupo_111"  data- name="Grupo 111" transform="translate（-2 -71. 5)">
          < text id="_775"/span> data-name="775" class="cls-3" transform="translate（742 1051. 811)"><tspan x="-31。 92" y="0">5< /tspan></text>
          < text id="CURSOS"/span> class="cls-4" transform="translate(742 1089. 811)"><tspan x="-35。 48" y="0">C< /tspan></text>
        </g>/span>
      </g>/span>
      < g id="Grupo_114"  data- name="Grupo 114" transform="translate（0 1276. 691)">
        < path id="Polígono_31" data-name="Polígono 31" class="cls-2" d="M120。 75 0 161 70l-40.25 70h-80.5L0 70 40.25 0z" transform="translate(1017 917.311)"/> 
        < g id="Grupo_112"  data- name="Grupo 112" transform="translate(50 -71. 5)">
          < text id="_4"/span> data-name="4" class="cls-3" transform="translate(1048 1051. 811)"><tspan x="-10。 64" y="0">4< /tspan></text>
          < text id="PAíSES"/span> class="cls-4" transform="translate(1048 1089. 811)"><tspan x="-30. 38" y="0"> P< tspan></text>
        </g>/span>
      </g>/span>
      < path id="Polígono_22" data-name="Polígono 22" class="cls-2" D="m141 0 47 82- 47 82H47L0 82 47 0z" transform="translate（86 2399. 502)"/>
      < path id="Polígono_23" data-name="Polígono 23" class="cls-2" D="m141 0 47 82- 47 82H47L0 82 47 0z" transform="translate（495 2399. 502)"/>
      < path id="Línea_50" data-name="Línea 50" class="cls-1" transform="translate（79. 5 2302.191）" d="M0 0v153"/>
    </g>/span>
  </svg>/span>
</div>/span>

uj5u.com熱心網友回復：

width 100%指的是SVG寬度的100%

嘗試設定：

width: 100vw;

這應該使其成為視圖寬度的100%

注意：我不確定100vw是否是視圖寬度的100倍......所以如果這看起來太大，請嘗試一下

標籤：

上一篇：從物件中排序陣列

下一篇：在Angular中使用ngClass或ngStyle動態地改變顏色