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; 復制代碼

轉載于:https://juejin.im/post/5b9e212ce51d450e69733c70

總結

以上是生活随笔為你收集整理的SVG专题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。