SVG前端画图

SVG（Scalable Vector Graphics）是一种基于XML的标记语言，用于描述二维矢量图形，它可以在Web浏览器中进行展示。

SVG优点是：可伸缩、分辨率无损失，不管是电脑还是手机屏幕上都能够清晰地显示，支持互动和动画等特效；

缺点是：不支持复杂的渲染效果，如模糊、阴影和透明度，文件大小比位图格式相对较大，开发者需要掌握一定的SVG绘图基础知识。

SVG可以在任何地方编写哦~

SVG 与 Canvas 区别

不同形状元素

基本通用的属性

• 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>
//案例圆形
 <svg width="100" height="100" > <circle cx="50" cy="50" r="40" stroke-width="3" stroke="#000" fill-opacity="0"></circle> </svg> </pre>

 

 

标签的属性

• cx：定义椭圆中心的X坐标
• cy：定义椭圆中心的y坐标
• rx：定义椭圆的水平半径
• ry：定义椭圆的垂直半径

椭圆 ellipse

基础案例

<pre><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是不同，这样可以形成椭圆

 

 

标签的属性

• cx：定义椭圆中心的X坐标
• cy：定义椭圆中心的y坐标
• rx：定义椭圆的水平半径
• ry：定义椭圆的垂直半径

线条 line

基础案例

 

<pre>//线条的案例 
<svg width="500" height="210"> <line x1="0" y1="0" x2="200" y2="200" stroke-width="3" stroke="#000"></line> </svg> </pre>

标签的属性

• x1：定义x轴上直线的起点坐标
• y1：定义y轴上直线的起点坐标
• x2：定义x轴上直线的末端坐标
• y2：定义y轴上直线的末端坐标

多线条 polyline

多边形 polygon

路径 path

SVG各个小案例

注意事项

我们可以在html文件中去编写我们的SVG标签，方便我们进行练习，可以在浏览器更加直观的去看到我们所写的效果，并且可以编写多个SVG

 

当要使用我们所写的SVG时

如果要使用我们所写的SVG，可以创建SVG文件 在文件中头部添加

<pre>
<?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>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> //里面编写不同形状元素 </svg> </pre>

1.通过矩形和圆形制作添加图案

效果

代码

 

 

<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
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。