HTML5 SVG: 探索矢量图形的新纪元
<!DOCTYPE html>
<html>
<head>
<title>SVG 示例</title>
</head>
<body>
<h1>SVG 图形</h1>
<svg width="500" height="200" xmlns="http://www.w3.org/2000/svg">
<!-- 创建一个圆形 -->
<circle r="50" cx="70" cy="70" fill="blue" fill-opacity="0.5" stroke="black" stroke-width="2" />
<!-- 创建一个矩形 -->
<rect width="100" height="50" x="150" y="40" fill="green" fill-opacity="0.5" stroke="black" stroke-width="2" />
<!-- 创建一条线 -->
<line x1="25" x2="175" y1="70" y2="120" style="stroke:rgb(255,0,0);stroke-width:2" />
<!-- 创建一个多边形 -->
<polygon points="300,10 350,198 190,78 190,138" style="fill:yellow;stroke:black;stroke-width:2;" />
</svg>
</body>
</html>这段代码展示了如何在HTML5中嵌入SVG图形，并创建了一个圆形、矩形、线条和多边形。每个图形都定义了自己的属性，如填充颜色、透明度、边框颜色和宽度。这是一个简单的SVG入门示例，对于学习SVG有很好的教育意义。
评论已关闭