SVG <svg>用法及代码示例

SVG 代表可缩放矢量图形。它可以用来制作图形和动画，就像在 HTML 画布中一样。

HTML 中的 <svg> 元素支持 SVG 图形。 SVG 图形具有一个容器，我们可以在其中创建各种形状，例如方框、路径、文本、图形图像和圆形。

用法:

<svg width="x" height="y"> shape_tags... </svg>

属性：

viewBox属性指示图像元素所在坐标的中心。
笔划属性表示用于绘制形状轮廓的颜色。
填充属性表示用于绘制元素的颜色。
stroke-width表示用于形状的颜色的宽度。
RGB(x，y，z)：这是红、绿、蓝 (RGB) 值的三元组，用于定义使用每种原色的多少来生成所需的颜色。
宽度和高度矩形中的表示矩形的高度和宽度。
baseProfile 属性表示作者认为正确呈现内容所必需的最小 SVG 语言配置文件。
contentScriptType属性指定 <svg> 元素上给定文档片段的默认脚本语言。
contentStyleType 属性表示给定文档片段的样式表语言。
preserveAspectRatio 属性表示具有给定宽高比的 viewBox 的元素必须如何适应具有不同宽高比的视口。
version 属性用于指示文档类型SVG的规范。
viewBox 属性表示 SVG 视口的尺寸。

示例 1：制作一个轮廓为绿色并填充黑色的圆圈。

HTML


<!DOCTYPE html> 
<html lang="en"> 
<body> 
    <svg viewBox="0 0 300 100" stroke="green" 
        fill="dark green"> 
        <circle cx="50" cy="50" r="40" /> 
    </svg> 
</body> 
</html>

cx表示圆的宽度，cy表示圆的高度，r表示圆的半径。

        <circle cx="50" cy="50" r="40"/>

输出：

示例 2：制作一个轮廓为深绿色并填充浅绿色的矩形。

HTML


<!DOCTYPE html> 
<html lang="en"> 
<h1>GeeksForGeeks</h1> 
<body> 
    <svg width="400" height="100"> 
        <rect width="400" height="100" 
            style="fill:rgb(20, 204, 20); 
                stroke-width:10;stroke:rgb(14, 180, 89)"/> 
    </svg> 
</body> 
</html>

输出：

支持的浏览器列表：

相关用法

注：本文由纯净天空筛选整理自ayushcoding100大神的英文原创作品 SVG <svg> Element。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。