一、簡介
<style>#topics #no-box-shadow-img { box-shadow: none }</style>
博主頭像
svg圖片格式不同于其它圖片格式，svg圖片本質上是一個xml檔案，它內部是標記語言，可用文本編輯器打開編輯，
svg除了可以用ai這種制圖軟體制作以外，我們程式員也可以手寫svg代碼實作二次開發（從零畫圖不必要...不至于...），
二、svg檔案簡單編輯
svg語法類似于html，且支持css語法，瀏覽器通過讀取css來渲染影片，有趣的是，GitHub的 README.md 檔案只支持少數html標簽、屬性，幾乎完全不支持css樣式，但是你插入帶css的svg圖片就沒問題，
2.1 嵌套
<g>標簽可以用于嵌套，包括嵌套子svg檔案，拷貝進去就行，
<g>標簽一般使用id屬性，而<path> <circle>等標簽一般使用class，添加影片的話在<style>標簽中使用css即可，
2.2 調整大小
使用以下屬性
width="366" height="366" viewBox="0 0 366 366"
前二者好理解，viewBox可有可無，有的話前兩位一般是0，后兩位最好和width、height保持一致，一般來說，只有<svg>主標簽內的viewBox屬性比較重要，
2.3 位移
想移動元素在圖片中的位置，使用 transform="translate(x y)" 屬性，
如你從其它svg中拷貝了一些圖形過來，嵌套在<g>標簽中，則在<g>標簽中使用transform就能調整其位置，
如果xy為0，則圖形在最左上角，圖形中心的位置是width、height的一半，
2.4 嵌套其它圖片格式
如果要在svg中嵌入png、jpg等圖片，需要用到<image>標簽，
呼叫遠程圖片的話，首先確保<svg>主標簽內有xmlns:xlink="http://www.w3.org/1999/xlink"，然后可以這樣使用
<image xlink:href="https://www.cnblogs.com/yunmuq/archive/2020/12/07/url" x="0" y="0" width="200" height="200"/>
注意事項參考：https://cloud.tencent.com/developer/section/1423874
此外，遠程呼叫存在一些問題，比如直接在頁面中遠程使用此svg圖片，其中的<image>能顯示，如果是被js渲染出的svg圖片，則svg中的<image>就可能不被加載，所以我推薦將圖片直接存在svg圖片中，
使用base64編碼即可：
>>在線圖片base64編碼工具<<
將編碼結果放入 xlink:href="https://www.cnblogs.com/yunmuq/archive/2020/12/07/ 這里 " 即可，
就醬 (??????)??
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/231875.html
標籤：其他
上一篇：再也不怕 JavaScript 報錯了，怎么看怎么處理都在這
下一篇：ListView上拉加載下拉重繪