<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
<!-- 矩形 -->
<rect width="150" height="80" fill="lightblue" stroke="black" stroke-width="2" x="25" y="10" />
<!-- 文本 -->
<text x="100" y="55" font-family="Arial" font-size="16" fill="black" text-anchor="middle">SVG Example</text>
</svg>
这个SVG图形的结构解释：
- <svg> 元素定义了整个SVG画布，设置了宽度（width）和高度（height）。
- <rect> 元素创建了一个矩形，设置了宽度（width）、高度（height）、填充颜色（fill）、边框颜色（stroke）和边框宽度（stroke-width）。x 和 y 属性指定了矩形的位置。
- <text> 元素创建了文本，设置了文本的位置（x 和 y）、字体（font-family）、字体大小（font-size）、填充颜色（fill）和文本对齐方式（text-anchor）。在这个例子中，text-anchor="middle"使得文本水平居中显示。
你可以将上述SVG代码嵌入到HTML文档中，并在浏览器中查看效果。这个例子只是一个简单的开始，SVG还支持许多其他元素和属性，以及复杂的路径、渐变、滤镜和动画等功能。
转载请注明出处：http://www.pingtaimeng.com/article/detail/12376/SVG