Canvas-开始玩svg

最新推荐文章于 2025-06-03 15:24:29 发布

转载最新推荐文章于 2025-06-03 15:24:29 发布 · 240 阅读

Canvas 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一个使用SVG创建简单图形并应用样式的HTML页面实例。该页面通过CSS设置了背景颜色和不同矩形的颜色，并实现了鼠标悬停效果。三个矩形分别位于页面的不同位置，展示了如何利用SVG属性进行定位。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body{
            background: #000;
            margin: 111px;
        }
        #rect3{
            fill: #f88;
        }
        #rect1:hover{
            fill: #f0f;
        }
        #rect2:hover{
            fill: #f33;
        }
    </style>
</head>
<body>
    <svg height="999px" width="999px">
        <rect id="rect1" height="111px" width="111px" fill="#3f3" />
            <rect id="rect2" height="111px" width="111px" fill="#3fa" x="222px" />
                <rect id="rect3" height="33px" width="333px" y="222px" />
    </svg>
</body>
</html>