svg入门新认知1.第一步创建并设置svg设置一条粗细为5px的红线进行绘制,且图标未填充svg{stroke:#ff0000;笔划宽度：5；fill:none;}2.创建一条直线。使用元素创建图标x1：起点横轴坐标y1：起点纵轴坐标x2：终点横轴坐标y2：终点纵轴坐标直线的起点由坐标(x1,y1)确定，用(x2,y2)确定直线的终点。让我们创建第一行，长度为50px；起点是x1=10,y1=10,然后x2=60,y2=10你可以看到一条平行于x轴的直线查看浏览器，你会看到一条50px的红线，当然你可以创建多个不同的效果如下3.创建折线元素只有一个属性：points；让我们开始制作一个类似于返回按钮的箭头。通过毕达哥拉斯定理就更清楚了。我们要创建一个50px的长度，那么我们开始插入图标(40,0)，第二个是(0,30)转节点下一步是(40,30+30)，即(40,60)是节点同理：与上述勾股定理，可以得到如下效果。如果不想这样写，也可以分两种写。/polyline>四、创建矩形使用有4个需要提供值的属性：x：左上角的x轴坐标值y：左上角的y轴坐标值width：矩形的宽度height：矩形的高度注意：也可以使用属性rx和ry来指定矩形的角半径我们在左上角创建一个偏移量为3px的正方形，所以x="3",y="3"的属性值，设置它的边长为100px，然后width="100",height="100”效果如下，我们再深入研究一下，结合以上知识点制作一个天子，或者自己研究一下其他图标五、创建一个圆这个属性是和上面的类似，也需要四个属性，这个和上面的区别是它是以圆心点定位，而不是像上面那样以左角定位cx：圆心位置在x上的坐标-axiscy：y轴上的圆心位置rx：沿x轴的半径，即会将图形分为上下两部分ry：沿y轴的半径，即会将图形分成左右两部分现在设计一个100px和100px的圆，所以半径为40px，那么rx="50"ry="50";同时我想和x,y相切，加上??上面有3px的偏移，所以中心点是53px，那么cx="53"cy="53"来设置这样就可以得到一个圆圈了！！了解有关制作奥迪徽标的更多信息第六，创建一个多边形。元素和元素几乎相同的点值组成一个图案；它们的区别在于折线不闭合，多边形自动闭合形成五变形图案七、是通过指定点和点与点之间的线来创建任意形状来生成SVG图形最灵活的方式，但也是最复杂的，即元素属性d，d代表数据，在这里，您将定义路径的所有点和线。在该属性中，设置路径点和在点之间创建线的命令由单个字母提供，例如M或L，后跟一组x和/或y坐标命令较多，M、L、Z是常用。 M表示移动到（moveto），它使用x，y值来确定起点 L表示线到（lineto） Z表示闭合路径。刚开始创建时，建议添加一个空路径的元素创建一个俄罗斯方块，一次添加一个命令，保存查看方向，这样就可以了易于创建；首先，我们移动到(20,3)开始，这是图标的起点。需要在属性d中添加命令M203，然后使用L命令在平行于x轴的起点处绘制一条60px的线段，所以命令为L803；然后保存并检查你的浏览器，你会看到一条直线；然后用L8023画一条20px的垂直于x轴的直线；然后使用L6023向左画一条直线，然后使用L6046。。..最后一步直接用Z，会自动关闭，出现上图（俄罗斯方块）8.元素的目的是定义可重用的图形。最初，中的内容是不可见的；line>十、注意这个用法提供了一个宽度和高度设置为100像素的图标。效果总结如下：通过设置
