svg

位图和矢量图

• 位图由像素点组成，每个像素点都有自己的颜色

• 矢量图以数学向量方式记录图像，内容以线条和色块为主，矢量图和分辨率无关，可以任意放大且清晰度不变，也不会出现锯齿状边缘

  
  

svg

• svg是基于xml的技术

svg使用方式

• 浏览器直接打开svg文件
• 在HTML中使用<img>标签引入
• 直接在HTML中使用svg标签
• 作为css背景
• iframe引入

• 浏览器直接打开svg文件

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>
</svg>
//以上为后缀为.svg文件内容(这里我是命名为test.svg)

代码解释：
第一行包含了 XML 声明。请注意 standalone 属性！该属性规定此 SVG 文件是否是“独立的”，或含有对外部文件的引用。
standalone="no" 意味着 SVG 文档会引用一个外部文件 - 在这里，是 DTD 文件。
第二和第三行引用了这个外部的 SVG DTD。该 DTD 位于 “http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd”。该 DTD 位于 W3C，含有所有允许的 SVG 元素。
SVG 代码以 <svg> 元素开始，包括开启标签 <svg> 和关闭标签 </svg> 。这是根元素。width 和 height 属性可设置此 SVG 文档的宽度和高度。version 属性可定义所使用的 SVG 版本，xmlns 属性可定义 SVG 命名空间。
SVG 的 <circle> 用来创建一个圆。cx 和 cy 属性定义圆中心的 x 和 y 坐标。如果忽略这两个属性，那么圆点会被设置为 (0, 0)。r 属性定义圆的半径。
stroke 和 stroke-width 属性控制如何显示形状的轮廓。我们把圆的轮廓设置为 2px 宽，黑边框。
fill 属性设置形状内的颜色。我们把填充颜色设置为红色。
关闭标签的作用是关闭 SVG 元素和文档本身。

---

• 在HTML中使用<img>标签引入

<img src="test.svg" alt="">

• 直接在HTML中使用svg标签

<div id="div1">
  <svg xmlns="http://www.w3.org/2000/svg">
    <circle cx="100" cy="100" r="40" fill="#f00"></circle>
  </svg>
</div>

• 作为css背景

<div class="mydiv"></div>
.mydiv {
    width: 200px;
    height: 200px;
    background: url("../test.svg") no-repeat;
}

• iframe引入

<iframe src="test.svg" frameborder="0"></iframe>

基本图形和属性

• 基本图形
  <rect>、<circle>、<ellipse>、<line>、<polyline>、<polygon>
• 基本属性
  fill、stroke、stroke-width、transform

• <rect>

  
  <rect>

<!--如果ry没有指定，ry的值将保持和rx一致-->
<rect width="200" height="200" x="100" y="100" fill="#f00" rx="30" ry="50"></rect>

• <circle>

  
  <circle>

<!--fill="none"或者fill="transparent"表示内部透明，不填充颜色-->
<circle cx="100" cy="100" r="40" fill="#f00" stroke="#000" stroke-width="5"></circle>
<!--一些样式设置也可以用style的方式指定-->
<!--<circle cx="200" cy="200" r="40" style="fill: #f00;stroke: #000;stroke-width: 5;"></circle>-->

• <ellipse>

  
  <ellipse>

• <line>

  
  <line>

<line x1="50" y1="50" x2="200" y2="300" stroke="#000"></line>   

<!--stroke-opacity，设置stroke的透明度-->
<line x1="50" y1="50" x2="200" y2="300" stroke="#000" stroke-width="10" stroke-opacity=".5"></line>

• <polyline>
  点之间可以用空格或者逗号隔开

  
  <polyline>
• <polygon>
  和<polyline>的区别就是<polygon>形成闭合

---

填充、描边和变换

---

<g>标签

• 是一个容器(分组)标签，用来组合元素
• 共用属性 transform="translate(0,0)"

<div class="oDiv">
    <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
        <!--g标签上可以指定id，用于后面的js操作-->
        <g transform="translate(200,200)" cx="200" cy="200" stroke="#333" stroke-width="5">
            <circle r="40" fill="none"></circle>
            <circle r="30" fill="none"></circle>
            <circle r="20" fill="none"></circle>
            <circle r="10" fill="none"></circle>
        </g>
    </svg>
</div>

---

<text>标签

• x y text-anchor

<div class="oDiv">
    <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
        <circle cx="200" cy="200" r="50" fill="none" stroke="#f00" stroke-width="5"></circle>
        <text x="200" y="200" font-size="20">前端svg</text>
    </svg>
</div>

可以看到文字左下角才对应text指定的坐标点

---

<div class="oDiv">
    <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
        <circle cx="200" cy="200" r="50" fill="none" stroke="#f00" stroke-width="5"></circle>
        <!--text-anchor的值为start、middle、end，用来指定文字的水平对齐方式-->
        <text x="200" y="200" font-size="20" text-anchor="middle">前端svg</text>
    </svg>
</div>

文字水平居中了，但是竖直还没居中

---

<div class="oDiv">
    <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
        <!--给g标签设置cursor: pointer，使里面的标签鼠标经过时都是手型-->
        <g style="cursor: pointer">
            <!--这里的fill不能设置为none-->
            <!--fill设置为"transparent"，经过里面的白色部分时才也是手型-->
            <circle cx="200" cy="200" r="50" fill="transparent" stroke="#f00" stroke-width="5"></circle>
            <text x="200" y="200" font-size="20" text-anchor="middle">前端svg</text>
        </g>
    </svg>
</div>

<image>标签

• x y width height
• xlink: href

<div class="oDiv">
    <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
        <g style="cursor: pointer">
            <image x="200" y="200" width="100" height="103" xlink:href="images/timg.jpg"></image>
            <text x="200" y="200" font-size="20" text-anchor="middle">前端svg</text>
        </g>
    </svg>
</div>

---

实例：

<div class="oDiv">
    <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
        <g style="cursor: pointer">
            <line x1="100" y1="100" x2="390" y2="200" stroke="#ccc"></line>
            <!--加一条透明的线，增大线的可指范围，增加用户体验-->
            <line x1="100" y1="100" x2="390" y2="200" stroke="transparent" stroke-width="10"></line>
            <!--x：100+(390-100)/2=245 245-10=235-->
            <!--y：100+(200-100)/2=150 150-10=140-->
            <rect x="235" y="140" fill="#999" width="20" height="20" rx="5"></rect>
            <text x="245" y="158" fill="#fff" font-size="20" text-anchor="middle">?</text>
        </g>
        <g style="cursor: pointer">
            <circle cx="100" cy="100" r="40" fill="#fff" stroke="#f00" stroke-width="3"></circle>
            <text x="100" y="108" font-size="20" text-anchor="middle">svg</text>
        </g>
        <g style="cursor: pointer">
            <circle cx="390" cy="200" r="60" fill="#fff" stroke="#f00" stroke-width="3"></circle>
            <text x="390" y="208" font-size="20" text-anchor="middle">前端</text>
        </g>
    </svg>
</div>

---

基本操作API

• 创建图形
  document.createElementNS(ns, tagName) //ns-命名空间，tagName-标签名
• 添加图形
  element.appendChild(childElement)
• 设置/获取属性
  element.setAtrribute(name, value)
  element.getAttribute(name)