如何在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 次浏览

开启你的职业生涯

完成课程获得认证

开始学习
广告