SVG 学习

SVG 是基于 XML 的技术，HTML 都是固定的标签，XML 可以自定义标
学习资料来源在 B站 上发现的视频：《svg 基础教程》，然后在此做一个简单的记录

一、引入 SVG 方式

• 使用 svg 文件，然后通过 img标签、background 属性等方式引入
• 直接在 HTML 页面添加 svg

二、基本图形

• circle
  • cx cy r
  • fill stroke stroke-width transparent
  • style 方法
• rect
  • width height x y
  • rx ry
• line
  • x1 y1 x2 y2
  • stroke-opacity
• ellipse：椭圆
• polyine：折线
• ploygon：多边形
• path：路径

三、标签

标签

• 是一个容器（分组）标签，用来组合元素的
• 例子：做个靶心
  • 共同属性
  • transform=”translate(0,0)”

标签

• x y text-anchor

标签

• x y width height
• xlink:href

四、创建元素

• createElementNS
  • 两个参数
  • 命名空间，标签名
• 封装 createTag 函数
• 分离数据

五、修复知识点

• 修复知识点
  • fill 通过 none 也可以不设置效果
• 实例：百度地图测量距离
  • http://map.baidu.com/
• 基本图形
  • polyline：折线
    • points 空格 === 逗号
  • polygon：多边形
• 实例：友盟占比环形图
  • http://umindex.com/social
• 路径
  • path
    • d 属性
    • M、L、H、V、A、Z
    • C、S、Q、T
  • 大小写
    • 相对坐标与绝对坐标

（M、L 分别是起始点和后续点，Z 是闭合，H 和 V 分别是水平绘制和垂直绘制）

六、A 命令

• X 半径
• Y 半径
• 角度
• 弧度
  • 0 小弧，1 大弧
• 方向
  • 0 逆时针，1 顺时针
• 终点 X 坐标
• 终点 Y 坐标

七、运动

• 原生 JS 操作
  • JQ 的 animate
    • duration
    • easing
    • step
• svg运动标签
  • animate
    • attributeName
    • dur
    • from
    • to

八、一些代码

<div id="div1">
  <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
<!--    <circle cx="59" cy="59" r="50" style="fill:transparent;stroke:black;stroke-width:5;"></circle>-->
<!--    <rect width="200" height="200" x="20" y="20" fill="red" rx="50"></rect>-->
<!--    <line x1="50" y1="50" x2="300" y2="300" stroke="black" stroke-width="20" stroke-opacity="0.5"></line>-->
    <g transform="translate(200,200)" fill="transparent" stroke="red" stroke-width="5">
      <circle cx="0" cy="0" r="50"></circle>
      <circle cx="0" cy="0" r="40"></circle>
      <circle cx="0" cy="0" r="30"></circle>
      <circle cx="0" cy="0" r="20"></circle>
      <circle cx="0" cy="0" r="10"></circle>
    </g>
  </svg>
</div>

「@浪里淘沙的小法师」