SVG（Scalable Vector Graphics）是一种基于XML的标记语言，用于描述二维矢量图形，它可以在Web浏览器中进行展示。
SVG优点是：可伸缩、分辨率无损失，不管是电脑还是手机屏幕上都能够清晰地显示，支持互动和动画等特效；
缺点是：不支持复杂的渲染效果，如模糊、阴影和透明度，文件大小比位图格式相对较大，开发者需要掌握一定的SVG绘图基础知识。
SVG可以在任何地方编写哦~
SVG 与 Canvas 区别
image.png
不同形状元素
基本通用的属性
- fill：定义矩形的填充颜色
- stroke-width：定义边框宽度
- stroke：定义矩形边框的颜色
- fill-opacity：定义填充颜色的不透明度（0-1取值范围）
- stroke-opacity：定义描边颜色的不透明度（0-1取值范围）
- opacity：整个元素的不透明度
矩形 rect
基础案例
<pre>
arduino
复制代码
//案例矩形 <svg width="100" height="100"> <rect width="100" height="100" fill="red" stroke-width="2" stroke="#ccc"></rect> </svg> </pre>
标签的属性
- width：定义矩形的宽度
- height：定义矩形的高度
- fill：定义矩形的填充颜色
- stroke-width：定义矩形的边框宽度
- stroke：定义矩形边框的颜色
- x：定义矩形左边位置
- y：定义矩形顶部位置
- fill-opacity：定义填充颜色的不透明度（0-1取值范围）
- stroke-opacity：定义描边颜色的不透明度（0-1取值范围）
- opacity：整个元素的不透明度
- rx：定义圆角X轴方向的半径长度
- ry：定义圆角y轴方向的半径长度
圆形 circle
基础案例
<pre>
js
复制代码
//案例圆形 <svg width="100" height="100" > <circle cx="50" cy="50" r="40" stroke-width="3" stroke="#000" fill-opacity="0"></circle> </svg> </pre>
image.png
标签的属性
- cx：定义椭圆中心的X坐标
- cy：定义椭圆中心的y坐标
- rx：定义椭圆的水平半径
- ry：定义椭圆的垂直半径
椭圆 ellipse
基础案例
<pre>
js
复制代码
<svg width="500" height="140" > <ellipse cx="200" cy="80" rx="80" ry="20" stroke-width="3" stroke="#000" fill-opacity="0" /> </svg> </pre>
椭圆xy是不同，这样可以形成椭圆
image.png
标签的属性
- cx：定义椭圆中心的X坐标
- cy：定义椭圆中心的y坐标
- rx：定义椭圆的水平半径
- ry：定义椭圆的垂直半径
线条 line
基础案例
<pre>
js
复制代码
//线条的案例 <svg width="500" height="210"> <line x1="0" y1="0" x2="200" y2="200" stroke-width="3" stroke="#000"></line> </svg> </pre>
image.png
标签的属性
- x1：定义x轴上直线的起点坐标
- y1：定义y轴上直线的起点坐标
- x2：定义x轴上直线的末端坐标
- y2：定义y轴上直线的末端坐标
多线条 polyline
多边形 polygon
路径 path
SVG各个小案例
注意事项
我们可以在html文件中去编写我们的SVG标签，方便我们进行练习，可以在浏览器更加直观的去看到我们所写的效果，并且可以编写多个SVG
image.png
当要使用我们所写的SVG时
如果要使用我们所写的SVG，可以创建SVG文件 在文件中头部添加
<pre>
js
复制代码
<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> </pre>
并且在SVG标签上添加
<pre>
js
复制代码
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> //里面编写不同形状元素 </svg> </pre>
1.通过矩形和圆形制作添加图案
效果
image.png
代码
<pre>
xml
复制代码
<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="100" height="100" xmlns="http://www.w3.org/2000/svg" version="1.1"> <circle cx="50" cy="50" r="40" stroke-width="3" stroke="#000" fill-opacity="0"></circle> <rect width="60" height="5" fill="#000" x="20" y="46" rx="3" ry="3"></rect> <rect width="5" height="60" fill="#000" x="47" y="20" rx="3" ry="3"></rect> </svg> </pre>
作者：广子头的康
链接：https://juejin.cn/post/7242247549510533176
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
网友评论