html svg

作者：遥岚月刹发布日期:2025-06-16 浏览:47

<!-- HTML SVG 示例代码 -->
<!DOCTYPE html>
<html>
<head>
    <title>HTML SVG 示例</title>
</head>
<body>
    <!-- 使用 SVG 创建一个简单的圆形 -->
    <svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
        <!-- 定义一个圆，cx 和 cy 是圆心坐标，r 是半径，fill 是填充颜色 -->
        <circle cx="50" cy="50" r="40" fill="blue" />
    </svg>

    <!-- 使用 SVG 创建一个矩形 -->
    <svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
        <!-- 定义一个矩形，x 和 y 是左上角坐标，width 和 height 是矩形的宽和高，fill 是填充颜色 -->
        <rect x="10" y="10" width="180" height="80" fill="green" />
    </svg>

    <!-- 使用 SVG 创建一条路径 -->
    <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
        <!-- 定义一条路径，d 属性描述路径的数据，stroke 是线条颜色，stroke-width 是线条宽度，fill 是填充颜色 -->
        <path d="M10 10 C 20 20, 40 20, 50 10" stroke="black" stroke-width="2" fill="none"/>
        <path d="M70 10 C 70 20, 120 20, 120 10" stroke="black" stroke-width="2" fill="none"/>
    </svg>
</body>
</html>

解释说明：

SVG (Scalable Vector Graphics) 是一种基于 XML 的矢量图形格式，用于在网页中绘制图形。
<svg> 标签定义了一个 SVG 图形区域，width 和 height 属性指定了图形的尺寸。
<circle> 标签用于绘制圆形，cx 和 cy 是圆心的坐标，r 是半径，fill 是填充颜色。
<rect> 标签用于绘制矩形，x 和 y 是左上角的坐标，width 和 height 是矩形的宽和高，fill 是填充颜色。
<path> 标签用于绘制任意形状的路径，d 属性包含路径数据，stroke 是线条颜色，stroke-width 是线条宽度，fill 是填充颜色。

上一篇：html注释怎么写

下一篇：html文件怎么创建