如何在HTML中調整SVG大小?


每個HTML文件可以包含不同的影像格式,例如PNG、jpeg、SVG、gif等,可以根據您的需要進行調整。本文將探討在HTML中調整SVG影像大小的各種方法。

SVG (可縮放向量圖形)是Web開發中使用的影像格式。它是一種基於XML的影像格式,可以縮放至任何大小而不會損失質量。因此,最好將SVG影像用於徽標和圖示。這些影像是解析度無關的,這意味著它們可以縮放至任何大小而不會損失質量。

在HTML中調整SVG大小

使用HTML高度和寬度屬性

我們可以使用SVG元素上的HTML widthheight 屬性來調整SVG元素的大小。您可以使用這些屬性設定任何元素的寬度和高度。

示例

<!DOCTYPE html>
<html>

<body>
    <svg width="800" height="800">
         <g>
            <polygon points="150,75 258,137.5 258,262.5 150,325 42,262.6 42,137.5"
                     stroke="black" stroke-width="3" fill="rgb(42, 157, 50)">
            </polygon>
         </g> 
      </svg>
</body>

</html>

輸出


使用CSS高度和寬度屬性

我們也可以使用CSS widthheight 屬性來調整SVG元素的大小。這是更可取的方法。您也可以使用這些屬性設定任何元素的寬度和高度。

示例

<!DOCTYPE html>
<html>
<head>
    <style>
        svg {
            width: 800px;
            height: 800px;
        }
    </style>
</head>

<body>
    <svg>
         <g>
            <polygon points="150,75 258,137.5 258,262.5 150,325 42,262.6 42,137.5"
                     stroke="black" stroke-width="3" fill="rgb(42, 157, 50)">
            </polygon>
         </g> 
      </svg>
</body>

</html>

輸出


Tanya Sehgal
Tanya Sehgal

Python 和 HTML

更新於:2024年10月1日

84 次瀏覽

開啟你的職業生涯

完成課程獲得認證

開始學習
廣告
© . All rights reserved.