在 HTML 中調整 SVG 大小

Question

我發現這個問題Resizing SVG in HTML但答案（刪除<svg> width和height屬性並調整viewBox屬性的大小）沒有正確重新調整我的 SVG 文件。

這是我從Looka購買的徽標文件，我想開始使用它，但我不知道如何重新縮放|調整它的大小。

<?xml version="1.0" encoding="UTF-8"?>
<svg
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink"
  version="1.1"
  width="3171.4285714285716"
  height="2645.5238095238096"
  viewBox="0 -25.714285714285715 3171.4285714285716 2645.5238095238096">
   <rect fill="#67b231" width="3171.4285714285716" height="2645.5238095238096" />
   <g transform="scale(8.571428571428571) translate(10, 10)">
      <defs id="SvgjsDefs2369" />
      <g transform="matrix(...)"></g>
      <g transform="matrix(...)"></g>
      <g transform="matrix(...)"></g>
   </g>
</svg>

如果我刪除<svg> width和height ， viewBox會保留大小。

如果我也縮小viewBox ，圖像保持相同的大小，我假設（！？）因為子<rect>也包含width和height屬性。

但是，如果我刪除<rect> width和height屬性，結果是類似大小的空白（並且沒有徽標）。

1. 我應該如何處理任意縮放|調整圖像大小？
2. 調整height時是否應該保留width viewBox
3. viewBox是否應該有一個正的 y 位置（當前-25.714... ）？

Answer 1

作為一個有用的片段怎么樣。 完全不編輯<svg>代碼，我已經設置了它，以便您可以將任何<svg>包裝在具有 svgSize 類的 div 中，如下所示：

<div class="svgSize"><svg>...</svg></div>

然后使用內聯樣式，您可以使用您希望的任何值傳遞--svgHeight或--svgWidth ，例如--svgHeight: 100px並且 SVG 將調整為給定的值，同時保持其縱橫比。 如果您不傳遞任何一個值，它將默認為 auto ，它將調整大小以填充父級

一定要喜歡 CSS 自定義屬性

 .svgSize { display: inline-flex; height: var(--svgHeight, auto); width: var(--svgWidth, auto); } .svgSize svg { height: auto; width: auto; max-height: 100%; max-width: 100%; }

 <div class="svgSize" style="--svgWidth: 5rem"> <?xml version="1.0" encoding="UTF-8"?> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="3171.4285714285716" height="2645.5238095238096" viewBox="0 -25.714285714285715 3171.4285714285716 2645.5238095238096"> <rect fill="#67b231" width="3171.4285714285716" height="2645.5238095238096" /> <g transform="scale(8.571428571428571) translate(10, 10)"> <defs id="SvgjsDefs2369" /> <g transform="matrix(...)"></g> <g transform="matrix(...)"></g> <g transform="matrix(...)"></g> </g> </svg> </div> <div class="svgSize" style="--svgHeight: 15rem"> <?xml version="1.0" encoding="UTF-8"?> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="3171.4285714285716" height="2645.5238095238096" viewBox="0 -25.714285714285715 3171.4285714285716 2645.5238095238096"> <rect fill="#67b231" width="3171.4285714285716" height="2645.5238095238096" /> <g transform="scale(8.571428571428571) translate(10, 10)"> <defs id="SvgjsDefs2369" /> <g transform="matrix(...)"></g> <g transform="matrix(...)"></g> <g transform="matrix(...)"></g> </g> </svg> </div> <div class="svgSize" style=""> <?xml version="1.0" encoding="UTF-8"?> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="3171.4285714285716" height="2645.5238095238096" viewBox="0 -25.714285714285715 3171.4285714285716 2645.5238095238096"> <rect fill="#67b231" width="3171.4285714285716" height="2645.5238095238096" /> <g transform="scale(8.571428571428571) translate(10, 10)"> <defs id="SvgjsDefs2369" /> <g transform="matrix(...)"></g> <g transform="matrix(...)"></g> <g transform="matrix(...)"></g> </g> </svg> </div>