SVG 新手入门

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的红色线条
当然可以创建多条不一样的线条

效果如下

三、 创建折线

元素只有一个属性：points；
我们来开始制作一个类似返回按钮的箭头，通过勾股定理来说比较明白些，我们要创建一个长度为50px的，那我们开始插入图标就是（40，0），第二个就是（0，30）转节点

接下来就是（40，30+30）那就是（40，60）为结点

同理得：结合上面的勾股定理可以得出下面效果

如果你不想这样写也可以这样2种写法写

四、 创建矩形

使用 有4个需要提供值的属性

1. x：左上角的 x 轴坐标值
2. y：左上角的 y 轴坐标值
3. width：矩形的宽度
4. height：矩形的高度

注意：你也可以使用属性 rx 和 ry 来指定矩形的圆角半径。

我们来创建一个正方形，左上角有一个偏移量3px，所以已x=“3”，y=“3”的属性值，设置他的边长为100px，则width=“100”，height=“100”

效果如下

我们进一步学习，结合上面的知识点创建一个田字，也可以自己深入研究其他图标

五、创建圆

这个属性类似上面一个，也需要4个属性，这个和上面的不一样的是，它是通过中心点来定位，而不像上面的通过左边角来定位

1. cx：中心位置在 x 轴上的坐标
2. cy：中心位置在 y 轴上的坐标
3. rx：沿 x 轴向的半径，也就是它会把图形分割成上下两部分
4. 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、L、Z

1.   M 表示移动到（moveto），它用x,y值来确定起点
2.   L 表示划线到（lineto）
3.   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，它会自动闭合就出现上面的图（俄罗斯方块）

八、 元素

目的定义可复用的图形，初始情况下 里面的内容是不可见的；

九、 创建组合对象

要把一个图标转为一个组合，用标签 来包裹它，然后给它一个id
例如：

十、 放置组合

获取在 中定义的复用对象并在 SVG 中显示出来。

注意 标签里面的x,y 是定义到特定的位置，通过href 获取上面的图标来使用

效果如下

十一、 创建模板对象

除开上面的组合方法，还有一个模板定义图标；模板和组合几乎一模一样，但是你要额外设置控制制视口（viewbox）和长宽比。

如果你想要把我们目前创建的图标设置为居中，图标转换成模板，然后使它们垂直填充100像素高的空间，并在这个空间中水平居中里面；

我们要将图标代码存放 模板中，然后给他们添加一个ID；同时添加一个属性viewBox，属性让我们可以定义每个模板的可见部分应该是什么，前两个定义图标的左上角，第三和第四分别定义它的宽度和高度。

通过use调用

这个use 提供设置好宽度和高度为100px 的图标
效果如下

总结：

• 通过设置
• 和创建线
• 创建矩形，实现田字，创建圆，实现一个奥迪标志， 创建多边形实现五边形，它门实现闭合的图形
• 任意创建形状，实现俄罗斯方块
• 组合形状，通过id标识形状
• 使用 元素定义组合和模板
• 使用 元素来放置你定义的组合和模板。