摘要：创建开始建议添加一个空路径的元素创建一个俄罗斯方块一次添加一个命令，保存查看走向，这样会可以方便创建出来第一，我们移动到，开始，这个是图标的开始点。
svg 入门新认知 一、第一步创建设置svg
设置粗细 5px 的红色线条绘制，图标是无填充的
svg {
stroke: #ff0000;
stroke-width: 5;
fill: none;
}
二、使用
x1：起点的水平轴坐标
y1：起点的竖直轴坐标
x2：终点的水平轴坐标
y2：终点的竖直轴坐标
通过坐标（x1，y1）来确定线的起点开始，通过（x2,y2）来确定直线的终点
让我们来创建第一条线，长为50px；起点为x1 = 10，y1 =10，则x2 = 60 ，y2 = 10
就可以看到一根直线平行于x轴
查看浏览器你会看到一条50px的红色线条
当然可以创建多条不一样的线条
效果如下
我们来开始制作一个类似返回按钮的箭头，通过勾股定理来说比较明白些，我们要创建一个长度为50px的，那我们开始插入图标就是（40，0），第二个就是（0，30）转节点
接下来就是（40，30+30）那就是（40，60）为结点
同理得：结合上面的勾股定理可以得出下面效果
如果你不想这样写也可以这样2种写法写
使用
x：左上角的 x 轴坐标值
y：左上角的 y 轴坐标值
width：矩形的宽度
height：矩形的高度
注意：你也可以使用属性 rx 和 ry 来指定矩形的圆角半径。
我们来创建一个正方形，左上角有一个偏移量3px，所以已x=“3”，y=“3”的属性值，设置他的边长为100px，则width=“100”，height=“100”
效果如下
我们进一步学习，结合上面的知识点创建一个田字，也可以自己深入研究其他图标
五、
这个属性类似上面一个，
cx：中心位置在 x 轴上的坐标
cy：中心位置在 y 轴上的坐标
rx：沿 x 轴向的半径，也就是它会把图形分割成上下两部分
ry：沿 y 轴向的半径，也就是它会把图形分割成左右两部分
现在设计一个100px和100px的圆，所以半径为40px，则rx = “50” ry=“50”；同时又想和x，y相切，加上上面有3px偏移量，所以中心点为 53px，则cx =“53” cy=“53”来设置
这样可以得到一个圆啦！！
进一步学习
弄一个奥迪汽车标志
六、
弄一个五变形的图案
七、
最灵活的生成 SVG 图形的方法，但是也是最复杂的，即
属性d，d代表data，在这里，你将定义路径的所有点和线。在这个属性里，设置路径点和在点之间创建连线的命令是由诸如 M 或 L 这样的单个字母来提供的，然后是一组 x 和/或 y 坐标
M 表示移动到（moveto），它用x,y值来确定起点
L 表示划线到（lineto）
Z 表示闭合路径。
创建开始建议添加一个空路径的元素
创建一个俄罗斯方块
一次添加一个命令，保存查看走向，这样会可以方便创建出来；
第一，我们移动到（20，3）开始，这个是图标的开始点。需要在属性d里面添加一个命令 M 20 3
接着使用L命令在起点平行于x轴画出一条60px的线段，所以命令为L 80 3；然后保存看看自己浏览器，你会看到一条直线；
然后用L 80 23 向下画出一条20px直线垂直于x轴的线；
接着用L 60 23 向左画出一条直线线，接着跟着 L 60 46
。。。。
最后一步直接用Z，它会自动闭合就出现上面的图（俄罗斯方块）
八、
目的定义可复用的图形，初始情况下
九、
要把一个图标转为一个组合，用标签
例如：
十、
获取在
注意
效果如下
除开上面的组合方法，还有一个模板定义图标；模板和组合几乎一模一样，但是你要额外设置控制制视口（viewbox）和长宽比。
如果你想要把我们目前创建的图标设置为居中，图标转换成模板，然后使它们垂直填充100像素高的空间，并在这个空间中水平居中里面；
我们要将图标代码存放
通过use调用
这个use 提供设置好宽度和高度为100px 的图标
效果如下
通过设置
使用
使用
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/116736.html
摘要：关于浏览器图标解决方案，一直就有很多以及相对而言矢量图标以及支持浏览器自身解析的优点，很多团队都已经在使用了。这篇文章主要说明图标的使用和制作。在中可以在任何地方复用文件中定定义的的形，包括和已经。 showImg(https://segmentfault.com/img/bVvef3); 关于浏览器图标解决方案，一直就有很多 CSS Sprite,Icon Font,CSS Icon...
摘要：关于浏览器图标解决方案，一直就有很多以及相对而言矢量图标以及支持浏览器自身解析的优点，很多团队都已经在使用了。这篇文章主要说明图标的使用和制作。在中可以在任何地方复用文件中定定义的的形，包括和已经。 showImg(https://segmentfault.com/img/bVvef3); 关于浏览器图标解决方案，一直就有很多 CSS Sprite,Icon Font,CSS Icon...
摘要：我在工作中用不到绘图，所以我是个小菜鸟。是一种使用描述图形的语言。基于，这意味着中的每个元素都是可用的。您可以为某个元素附加事件处理器。在中，每个被绘制的图形均被视为对象。如果对象的属性发生变化，那么浏览器能够自动重现图形。 跟着步骤学习，耐心点好么，不要只看图不看文字，只看图5天都学不会。我在工作中用不到h5绘图，所以我是个小菜鸟。但我始终有一种迷之信念，任何已经存在的东西学一下就会...
阅读 441·2021-11-25 09:43
阅读 1459·2021-11-18 10:02
阅读 907·2021-10-15 09:39
阅读 1725·2021-10-12 10:18
阅读 1907·2021-09-22 15:43
阅读 565·2021-09-22 15:10
阅读 1965·2019-08-30 15:53
阅读 791·2019-08-30 13:00
