本文介绍了SVG（Scalable Vector Graphics）的基本概念，SVG是一种基于XML的矢量图形格式，适用于网络，并能在缩放时保持图像质量不变。通过代码分析，展示了如何使用SVG创建圆形，并解释了各属性含义，如cx、cy、stroke、stroke-width和fill。最后，给出了一个简单的SVG圆形代码示例。
什么是SVG？
SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
SVG 用来定义用于网络的基于矢量的图形
SVG 使用 XML 格式定义图形
SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失
Ai的矢量图形与SVG一致，不会因为网页的放大缩小而改变图片的质量
并且SVG可以利用代码自由的改变颜色/大小
那么就直接来分析代码吧
代码分析
首先定义一个SVG
这个SVG 是用来装载circle属性
可以在一个SVG中声明多个Circle属性
Circle：声明一条线的属性
然后再声明这个值（Circle）所规定的范围
cx="10" cy="10"代表着位置
一般是由位置（例如 左边: left ）的第一个字与X/Y轴一起组成
例如 l+y=ly 那么就会定义成 左上 可以通过各种方法来改变SVG生成的位置
其他两个就是普普通通的代码了
stroke="black" 边框为黑色线条
stroke-width="2" 边框的厚度
fill="red" 里面的颜色为红色
当然svg里也有预设的图片 所以可以套用
- 矩形 <rect>
- 圆形 <circle>
- 椭圆 <ellipse>
- 线 <line>
- 折线 <polyline>
- 多边形 <polygon>
- 路径 <path>
成品展示
代码展示
<!DOCTYPE html>
<html>
<body>
<h1>一个圆圈</h1>
<svg>
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
</svg>
</body>
</html>
扫一扫
4987
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
