SVG 详解（二）基本概念

SVG 实例

// 一个 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>

代码解释

第一行包含了 XML 声明。请注意 standalone 属性！该属性规定此 SVG 文件是否是“独立的”，或含有对外部文件的引用。

standalone=”no” 意味着 SVG 文档会引用一个外部文件 - 在这里，是 DTD 文件。

第二和第三行引用了这个外部的 SVG DTD。该 DTD 位于 “http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd”。该 DTD 位于 W3C，含有所有允许的 SVG 元素。

DTD（文档类型定义）的作用是定义 XML 文档的合法构建模块。

DTD 可被成行地声明于 XML 文档中，也可作为一个外部引用。

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 中使用

• <embed> 标签
  优势：所有主要浏览器都支持，并支持HTML4，XHTML和HTML5标准
  缺点：不允许使用脚本。

<object data="circle1.svg" type="image/svg+xml"></object>

• <object> 标签
  优势：所有主要浏览器都支持，并支持HTML4，XHTML和HTML5标准
  缺点：不允许使用脚本。

<object data="circle1.svg" type="image/svg+xml"></object>

• <iframe> 标签
  优势：所有主要浏览器都支持，并允许使用脚本
  缺点：不推荐在HTML4和XHTML中使用（但在HTML5允许）

<iframe src="circle1.svg"></iframe>

• 直接在HTML嵌入SVG代码

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
   <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
</svg>

• 链接到SVG文件

<a href="circle1.svg">View SVG file</a>

• 直接作为 img 标签使用

<img src="circle1.svg" />

常用属性

// 示例
<svg x="0" y="0" width="500" height="200" viewBox="0 0 50 20" >
    <rect x="20" y="10" width="10" height="5"
    style="stroke: #000000; fill:none;"/>
</svg>

• viewport
  指的是 x ，y，width，height 这四个属性在页面上固定的矩形区域，svg 标签所占的区域大小。

• viewbox
  指的是，svg 标签在 viewport 中的实际占位。

viewBox="x, y, width, height"  // x:左上角横坐标，y:左上角纵坐标，width:宽度，height:高度

例如最上面的的示例，svg 中的单位尺寸就变成 200/20px = 10px。所以其中的矩形实际大小是 [200, 100] 到 [100,50]。
需要注意一点，svg 中子标签是不能带单位的，单位在 svg 标签中初始化。

css 常见的单位
> 单位    含义
em  相对于父元素的字体大小
ex  相对于小写字母"x"的高度
px  相对于屏幕分辨率而不是视窗大小：通常为1个点或1/72英寸
in  inch, 表英寸
cm  centimeter, 表厘米
mm  millimeter, 表毫米
pt  1/72英寸
pc  12点活字，或1/12点
%   相对于父元素。正常情况下是通过属性定义自身或其他元素

• preserveAspectRatio
  用来定义 viewport 和 viewbox 相互对齐的方式。

  preserveAspectRatio="align meetOrSlice"

  • align: 定义 viewport 和 viewbox 的对齐方式，分为 x,y 轴两个方向。X轴方向有三种方式：左边重合（xMin），x 轴中点重合（xMid），右边重合（xMax）。同理，Y 轴也有 顶边重合（YMin），y 轴中点重合（YMid），底边边重合（YMax）
  • meetOrSlice: 定义 SVG 是内嵌（meet）、裁剪（slice）或是 none

  align 的默认值是 xMidYMid，中点重合
  

  可以看出，viewbox 是通过中心进行延展的。注意，它的原点坐标还是在 viewbox 的左上角。如果你是动态增加尺寸的话，此时并不是从左到右增加，而是从中心向两端扩张。同理，如果你使用的是 xMinYMin 的话，那么如果存在尺寸变化，那么相对点则是从左上角开始的。简单来说，align 相对点其实一共有 9 个。
  

  <svg width="400" height="200" viewBox="0 0 200 200" preserveAspectRatio="xMinYMin slice" style="border:1px solid #000000;">
      <rect x="10" y="10" width="150" height="150" fill="#7276"/>
  </svg>

  这里宽度的缩放比和高度缩放比如下

  scale_x = 400/200 = 2
  scale_y = 200/200 = 1

  meet(默认值): 保持纵横比缩放viewBox适应viewport，使 svg 尽可能的显示在 viewport 里，会在 scale_x 和 scale_y 中选择最小的值作为缩放标准。

  slice: 保持纵横比同时比例小的方向放大填满viewport，使 svg 完全铺满 viewport，会在 scale_x 和 scale_y 中选择最大的值作为缩放标准。

  none: 扭曲纵横比以充分适应viewport

  如果为 meet ，此时的缩放比例为 1，效果如下图
  

  如果为 slice，缩放比为 2，效果如下图
  

  如果为 none，效果如下图
  

上一篇：Svg 详解（一）背景
下一篇：SVG 详解（三）基础语法