生活随笔
收集整理的這篇文章主要介紹了
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中的大小
文本居中
text-anchor:middle;
復制代碼
轉載于:https://juejin.im/post/5b9e212ce51d450e69733c70
總結
以上是生活随笔為你收集整理的SVG专题的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
