1. SVG 基本结构
SVG文档由<svg>元素开始，定义了SVG画布的大小和其他属性。
<svg width="300" height="200" xmlns="http://www.w3.org/2000/svg">
<!-- SVG 内容 -->
</svg>
- width 和 height 属性定义了SVG画布的宽度和高度。
- xmlns 属性指定SVG命名空间。
2. 基本形状
矩形 (<rect>)
<rect width="100" height="50" fill="blue" />
- width 和 height 定义了矩形的宽度和高度。
- fill 定义了填充颜色。
圆形 (<circle>)
<circle cx="50" cy="50" r="30" fill="green" />
- cx 和 cy 定义了圆心的坐标。
- r 定义了半径。
椭圆 (<ellipse>)
<ellipse cx="150" cy="80" rx="80" ry="50" fill="red" />
- cx 和 cy 定义了椭圆中心的坐标。
- rx 和 ry 定义了水平和垂直方向的半轴长度。
直线 (<line>)
<line x1="10" y1="10" x2="90" y2="90" stroke="black" />
- x1, y1 和 x2, y2 定义了直线的起点和终点。
- stroke 定义了线的颜色。
折线 (<polyline>)
<polyline points="10,10 50,90 90,10" fill="none" stroke="purple" />
- points 定义了一系列点的坐标。
- fill 定义了填充颜色。
- stroke 定义了线的颜色。
多边形 (<polygon>)
<polygon points="10,10 50,90 90,10" fill="yellow" />
- points 定义了一系列点的坐标。
- fill 定义了填充颜色。
3. 文本 (<text>)
<text x="20" y="40" font-family="Arial" font-size="20" fill="brown">Hello, SVG!</text>
- x 和 y 定义了文本的起始位置。
- font-family 定义了字体。
- font-size 定义了字体大小。
- fill 定义了文本颜色。
4. 渐变 (<linearGradient> 和 <radialGradient>)
线性渐变 (<linearGradient>)
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
</linearGradient>
<rect width="300" height="200" fill="url(#grad1)" />
径向渐变 (<radialGradient>)
<radialGradient id="grad2" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
</radialGradient>
<circle cx="150" cy="100" r="80" fill="url(#grad2)" />
5. 路径 (<path>)
<path d="M10 80 Q 95 10 180 80" fill="none" stroke="black" />
- d 属性定义了路径的命令序列。
- fill 定义了填充颜色。
- stroke 定义了线的颜色。
6. 使用外部CSS样式
<style>
.blue-rect {
fill: blue;
stroke: black;
}
</style>
<rect x="10" y="10" width="100" height="50" class="blue-rect" />
7. 链接和嵌入其他SVG文件
<a xlink:href="https://example.com">
<text x="20" y="40" font-family="Arial" font-size="20" fill="blue">Click me!</text>
</a>
<image x="50" y="80" width="100" height="50" xlink:href="image.svg" />
这是一个简单的SVG教程，涵盖了基本形状、文本、渐变、路径等常见元素的用法。SVG提供了丰富的功能，允许你创建各种各样的矢量图形。深入了解SVG规范和属性将帮助你更好地利用SVG进行图形设计和动画。
转载请注明出处：http://www.zyzy.cn/article/detail/14664/SVG