1

svg 入门新认知

一、第一步创建设置svg

<svg width="100%" height="500">
   
</svg>

设置粗细 5px 的红色线条绘制,图标是无填充的

svg {
  stroke: #ff0000;
  stroke-width: 5;
  fill: none;
}

二、<line> 创建一条直线。

使用<line> 元素创建图标

  • x1:起点的水平轴坐标
  • y1:起点的竖直轴坐标
  • x2:终点的水平轴坐标
  • y2:终点的竖直轴坐标

通过坐标(x1,y1)来确定线的起点开始,通过(x2,y2)来确定直线的终点

让我们来创建第一条线,长为50px;起点为x1 = 10,y1 =10,则x2 = 60 ,y2 = 10
就可以看到一根直线平行于x轴

<line x1="10" y1="10" x2="60" y2="10"></line>

查看浏览器你会看到一条50px的红色线条
当然可以创建多条不一样的线条

<line x1="10" y1="10" x2="60" y2="10"></line>
<line x1="10" y1="20" x2="60" y2="20"></line>
<line x1="10" y1="30" x2="60" y2="30"></line>

效果如下
clipboard.png

三、<polyline> 创建折线

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

<polyline points="
    40 0
    0  30
"></polyline>

clipboard.png

接下来就是(40,30+30)那就是(40,60)为结点

<polyline points="
    40 0
    0  30
    40 60
"></polyline>
同理得:结合上面的勾股定理可以得出下面效果

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

  1. <polyline points="40 0,0 30,40 60"></polyline>
  2. <polyline points="40 0 0 30 40 60"></polyline>

四、<rect> 创建矩形

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

  1. x:左上角的 x 轴坐标值
  2. y:左上角的 y 轴坐标值
  3. width:矩形的宽度
  4. height:矩形的高度
注意:你也可以使用属性 rx 和 ry 来指定矩形的圆角半径。

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

<rect x="3" y="3" width="100" height="100"></rect>

效果如下
clipboard.png

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

  <rect x="3" y="3" width="100" height="100"></rect>
  <line x1="3" y1="50" x2="100" y2="50"></line>
  <line x1="53" y1="0" x2="53" y2="100"></line>

五、<ellipse>创建圆

这个属性类似上面一个,<ellipse>也需要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”来设置

<ellipse cx="53" cy="53" rx="50" ry="50"></ellipse>

这样可以得到一个圆啦!!

进一步学习
弄一个奥迪汽车标志

  <ellipse cx="53" cy="53" rx="50" ry="50"></ellipse>
  <ellipse cx="132" cy="53" rx="50" ry="50"></ellipse>
  <ellipse cx="212" cy="53" rx="50" ry="50"></ellipse>
  <ellipse cx="290" cy="53" rx="50" ry="50"></ellipse>

clipboard.png

六、<polygon> 创建多边形

<polygon> 元素和 <polyline> 元素几乎一样。都是采用点的值来设置组成一个图案;它们不同之处是 折线 <polyline> 不是闭合的而多边形 <polygon> 是自动闭合的

弄一个五变形的图案

 <polygon points="100 0,195 69, 159 181, 41 181 ,5 69" />

clipboard.png

七、<path> 通过指定点以及点和点之间的线来创建任意形状

最灵活的生成 SVG 图形的方法,但是也是最复杂的,即 <path> 元素
属性d,d代表data,在这里,你将定义路径的所有点和线。在这个属性里,设置路径点和在点之间创建连线的命令是由诸如 M 或 L 这样的单个字母来提供的,然后是一组 x 和/或 y 坐标

<path>的命令比较多,通常比较常用的是M、L、Z

  1. &nbsp M 表示移动到(moveto),它用x,y值来确定起点
  2. &nbsp L 表示划线到(lineto)
  3. &nbsp Z 表示闭合路径。

创建开始建议添加一个空路径的元素

<path d="
 
"></path>

创建一个俄罗斯方块

clipboard.png

一次添加一个命令,保存查看走向,这样会可以方便创建出来;

  • 第一,我们移动到(20,3)开始,这个是图标的开始点。需要在属性d里面添加一个命令 M 20 3
  • 接着使用L命令在起点平行于x轴画出一条60px的线段,所以命令为L 80 3;然后保存看看自己浏览器,你会看到一条直线;
  • 然后用L 80 23 向下画出一条20px直线垂直于x轴的线;
  • 接着用L 60 23 向左画出一条直线线,接着跟着 L 60 46
  • 。。。。
  • 最后一步直接用Z,它会自动闭合就出现上面的图(俄罗斯方块)
 <path d="
      M 20 3
      L 80 3
      L 80 23
      L 60 23
      L 60 46
      L 40 46
      L 40 23
      L 20 23
      Z
  "></path>

八、<defs> 元素

目的定义可复用的图形,初始情况下 <defs> 里面的内容是不可见的;

<defs>
<!-- 图标存放这里,图标都被隐藏起来 -->
</defs>

九、<g> 创建组合对象

要把一个图标转为一个组合,用标签 <g></g> 来包裹它,然后给它一个id
例如:

 <g id="lign">
   <!-- 第一个实列 -->
  <line x1="10" y1="10" x2="60" y2="10"></line>
  <line x1="10" y1="20" x2="60" y2="20"></line>
  <line x1="10" y1="30" x2="60" y2="30"></line>
 </g>


 <g id="back">
   <!-- 返回键 -->
  <polyline points="40 0 0 30 40 60"></polyline>
 </g>

<g id="word">
  <!-- 田字 -->
  <rect x="3" y="3" width="100" height="100"></rect>
  <line x1="3" y1="50" x2="100" y2="50"></line>
  <line x1="53" y1="0" x2="53" y2="100"></line>
</g>
     

十、<use> 放置组合

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

      <defs>
       <g id="lign">
          <!-- 第一个实列 -->
          <line x1="10" y1="10" x2="60" y2="10"></line>
          <line x1="10" y1="20" x2="60" y2="20"></line>
          <line x1="10" y1="30" x2="60" y2="30"></line>
        </g>


        <g id="back">
          <!-- 返回键 -->
          <polyline points="40 0 0 30 40 60"></polyline>
        </g>

        <g id="word">
          <!-- 田字 -->
          <rect x="3" y="3" width="100" height="100"></rect>
          <line x1="3" y1="50" x2="100" y2="50"></line>
          <line x1="53" y1="0" x2="53" y2="100"></line>
        </g>
      </defs>

      <use href="#lign" x = "5" y = "5"></use>
      <use href="#back" x = "50" y = "50"></use>
      <use href="#word" x = "150" y = "150"></use>
注意 <use> 标签里面的x,y 是定义到特定的位置,通过href 获取上面的图标来使用

效果如下
clipboard.png

十一、<symbols> 创建模板对象

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

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

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

通过use调用

      <!-- 第一个实列 宽:50 高:30 -->
      <symbol id="lign-symbol" viewBox="0 0 50 30">
        <!-- 第一个实列 -->
        <line x1="10" y1="10" x2="60" y2="10"></line>
        <line x1="10" y1="20" x2="60" y2="20"></line>
        <line x1="10" y1="30" x2="60" y2="30"></line>
      </symbol>

      <!-- 返回键 宽:40 高:60 -->
      <symbol id="back-symbol" viewBox="0 0 40 60">
         <!-- 返回键 -->
         <polyline points="40 0 0 30 40 60"></polyline>
      </symbol>

       <!-- 田字 宽:106 高:106 -->
      <symbol id="word-symbol" viewBox="0 0 106 106">
         <!-- 田字 -->
          <rect x="3" y="3" width="100" height="100"></rect>
          <line x1="3" y1="50" x2="100" y2="50"></line>
          <line x1="53" y1="0" x2="53" y2="100"></line>
      </symbol>
     

      <use href="#lign-symbol" x="0" y="0" width="100" height="100"></use>
      <use href="#back-symbol" x="0" y="100" width="100" height="100"></use>
      <use href="#word-symbol" x="0" y="210" width="100" height="100"></use>

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

clipboard.png

总结:

  • 通过设置<svg>元素包裹整个图标
  • <line>和<polyline>创建线
  • <rect>创建矩形,实现田字,<ellipse>创建圆,实现一个奥迪标志,<polygon> 创建多边形实现五边形,它门实现闭合的图形
  • <path> 任意创建形状,实现俄罗斯方块
  • <g>组合形状,通过id标识形状
  • 使用 <defs> 元素定义组合和模板
  • 使用 <use> 元素来放置你定义的组合和模板。

hhemin
23 声望1 粉丝

无bug是梦想,年薪百万是理想