SVG矢量图形详解-优快云博客

18-08-16 SVG专题

SVG 可缩放矢量图形 Scalable Vector Graphics，简称SVG

引用svg

保存成 .svg 文件，然后在HTML页面中通过img、object、iframe元素引用到.svg文件
在css中通过bg-image、border-image这样的属性来引用独立的.svg文件

css中可以直接引入svg文本，而不必转为base64
//base64
.icon-arrow-down {
    width: 20px; height: 20px;
    background: url(data:image/svg+xml;base64,PHN2ZyB2...) no-repeat center/100%;
}

//直接引入
.icon-arrow-down {
    width: 20px; height: 20px;
    background: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200"><path.../></svg>') no-repeat center;
    background-size: 100%;
}
复制代码

利用js动态创建svg，并注入到html的dom中，这样有一个优点，可以对浏览器使用替代技术，在不能解析svg的情况下，创建其他内容来替换

svg中的图层

svg中一半用 <g> 标签来表示图层，分组的概念
svg中的图层上下层叠顺序，与设计软件的层叠顺序相反，与dom层叠顺序一样，层位置在下边的，显示的时候在上边，并且，svg中不可以用 z-index 属性调节层叠顺序

svg适口（viewbox）

<svg width="200" height="200" viewBox="0 0 300 300" v-html="luckyStr"></svg>
复制代码

svg适口是对内的，他提供给svg标签内部环境一个自定义的坐标系
而width和height属性是对外的，用来告知外界svg这个对象在document中的大小

文本居中

//需要写到style中
text-anchor:middle;
复制代码