HTML5矢量图形SVG

<a href="circle1.svg">查看 SVG 文件</a>

预览：

注意：

如果你的svg标签上，没有 以下属性设置，访问svg文件时，会报bug。

 <svg  viewBox="" version="1.1"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink"  />

报的错误如下所示：

svg代码也可以写在一个独立的文件中，然后在html文件中，用、<object>、<embed>、<iframe>等标签插入网页

<embed src="circle1.svg" type="image/svg+xml" />

注意：<embed>

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

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

注意：<object>

• 优势：所有主要浏览器都支持，但是有些浏览器需要安装插件才支持，并支持HTML4，XHTML和HTML5标准
• 缺点：不允许使用脚本。
• 如果你用object标签去插入svg文件，我们首先用ie9去预览查看效果。

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

注意：<iframe>

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

其中embed和object设置边框线的现象

<a href="./cr1.svg">查看svg文件</a> 
   <br><br><br>
   <iframe src="./cr1.svg" width="400" height="400" frameborder="0"></iframe>
   <br><br><br>
   <embed src="./cr1.svg" type="image/svg+xml" style="border:10px dashed red">

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

预览：

SVG常见属性

svg中的x、y、width和height属性定义这段SVG代码所表达的数据在绘制时所占用的空间大小（可视区大小）；svg中viewBox (0 0 200 200) :0 0 表示x轴和y有的起始位置，即可视区View中哪个位置开始显示（可见），后面200, 200 表示长和宽但是只是一个数量

用法要设置4个值：****

viewbox="x, y, width, height"

****，例子：

这里定义的画布尺寸是100x100px。但是，viewBox属性定义了画布上可以显示的区域：从(0,0)点开始，200宽200高的区域。这个200x200的区域，会放到100x100的画布上显示。于是就形成了缩小两倍的效果。

viewbox 里定义的，也就是可视区可见的；坐标 (0, 0) 说明在左上角开始截，100 x 100 就是这个框框的宽x高

<svg width="400" height="400" style="border:1px solid blue"
     viewBox="0 0 200 200" version="1.1"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
     <circle cx="150" cy="150" r="100" fill="orange" stroke="pink" stroke-width="5" style=""/>
   
</svg>

注意：

你绘制的图像的大小，不能比 我们指定的可视区域的viewBox="0 0 200 200"大小要大。 绘制的图像和 svg的宽度和高度没关系。

1.1.4 SVG有一些预定义的形状元素

SVG有一些预定义的形状元素，可被开发者使用和操作：

• 矩形 <rect>
• 圆形 <circle>
• 椭圆 <ellipse>
• 线 <line>
• 折线 <polyline>
• 多边形 <polygon>
• 路径 <path>

矩形元素

<rect> 标签可用来创建矩形，以及矩形的变种

• rect 元素的 width 和 height 属性可定义矩形的高度和宽度
• style 属性用来定义 CSS 属性
• CSS 的 fill 属性定义矩形的填充颜色（rgb 值、颜色名或者十六进制值）
• CSS 的 stroke-width 属性定义矩形边框的宽度
• CSS 的 stroke 属性定义矩形边框的颜色

我们可以用属性，去设置这个矩形的边框线和填充色：

<svg width="" height=""
     viewBox="" version="1.1"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
    <rect x="" y="" width="" height="" style=""/>
</svg>

我们可以用style行内样式，去设置这个矩形的边框线和填充色：

<svg width="500" height="500"
     viewBox="" version="1.1"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
     <rect x="100" y="200" width="300" height="100" fill="blue" stroke="pink" stroke-width="2" style=""/>
     <rect x="100" y="0" width="300" height="100"  stroke="pink" stroke-width="2" style="fill:green; stroke:orange;stroke-width:10px;"/>
     
</svg>

预览：