HTML5矢量图形SVG

最新推荐文章于 2024-03-21 03:54:35 发布

仙鹤__

最新推荐文章于 2024-03-21 03:54:35 发布

阅读量2.5k

点赞数

文章标签： html5 vscode 前端

本文链接：https://blog.csdn.net/weixin_52629158/article/details/128274752

版权

1.1.1 什么是SVG？

SVG 意为可缩放矢量图形（Scalable Vector Graphics）。

SVG是一种使用xml技术描述图形的语言，使用 XML 格式定义图像。

SVG指可伸缩矢量图形
SVG用于定义用于网络的基于矢量的图形
SVG是一种基于xml语法的图像格式
SVG图像在放大的情况下图形不会失真
SVG的优点

SVG与canvas的区别：

SVG

不依赖分辨率

支持事件处理器（可绑定事件）

最适合大型渲染区域的应用程序（如：百度地图）

canvas

依赖分辨率

不支持事件处理器

最适合图像密集型的应用程序（游戏）
- SVG是可伸缩的，高保真图形、无限放大且不会失真
- SVG可通过文本编辑器创建和修改
- SVG可被搜索、索引、脚本化和压缩
- SVG可在任何的分辨率下被高质量地打印
- SVG文件体积较小
- SVG可在图像质量不下降的情况下被放大

1.1.2 vscode编辑器中的插件

vscode 写svg标签以及svg对应的基本图标标签，我们使用插件---SVG

vscode 预览，我们使用插件---SVG Snippets

方法：

输入 svg-对应的标签名

例如：

svg-svg ，会生成svg标签

svg-circle，会生成circle标签

svg-img，会生成image标签

等等

vscode 查看svg图形---SVG Viewer(查看svg图)

Svg Preview：效果预览，需要选中.svg` 后缀的文件，右上角才会有按钮进入预览。

1.1.3 SVG在html中

在html中，使用svg，首先必须使用<svg>标签

使用<svg width="" height="" style="" xmlns="http://www.w3.org/2000/svg" version="1.1"><svg>元素

使用<svg>元素绘制图像时，这些元素必须定义<svg>元素中

写svg标签的时候，在html页面中直接输入 svg-svg+回车。

直接在html嵌入SVG代码

<svg width="600" height="600" style="border:1px solid blue;"
        viewBox="" version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink">
   <circle cx="100" cy="100" r="40" fill="red" stroke="green" style=""/>
   <circle cx="300" cy="300" r="60" fill="red" stroke="green" style=""/>
   <circle cx="500" cy="500" r="30" fill="red" stroke="green" stroke-width="2" style=""/>
   <!-- <image xlink:href="" x="" y="" height="" width=""/> -->
   </svg>

预览：

Scalable Vector Graphics (SVG) 2 指定的标准

我们可以给svg标签，添加边框线，style="border: 1px solid blue;"让我们看到整体的svg的宽和高。

我们可以给svg标签，指定宽度和高度，width="600" height="600"。如果我们不指定宽度和高度。当前这个svg就是默认宽度椒300，高度是150, 和canvas画布的默认宽度和高度是一样的。

注意：在Firefox、Internet Explorer9、谷歌Chrome和Safari中，你可以直接在HTML嵌入SVG代码。

链接到SVG文件

首先创建circle1.svg文件，里面代码如下：

<svg width="400" height="400" style="border:1px solid blue;margin:0 auto;"
     viewBox="" 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>

预览：

然后在html文件中，写a超链接标签，用 <a> 标签链接到一个 SVG 文件：链接到 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文件中，用<img>、<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>

预览：