有什么地方可以上傳圖示并獲取 SVG 字串向量嗎?
另外,下面代碼中的那些標簽是什么?<g> <path>和viewBox, data-original, xmlns,d標簽是?
最近,使用 SVG 代替常規圖示的性能值得嗎?
<svg viewBox="0 0 512 512">
<g xmlns="http://www.w3.org/2000/svg" fill="currentColor">
<path d="M0 0h128v128H0zm0 0M192 0h128v128H192zm0 0M384 0h128v128H384zm0 0M0 192h128v128H0zm0 0"
data-original="#bfc9d1"
/>
</g>
</svg>
uj5u.com熱心網友回復:
這是一個非常好的使用 SVG 和 react 的指南。https://www.sanity.io/guides/import-svg-files-in-react
您可以使用許多在線轉換器來創建 svg,例如https://www.pngtosvg.com/
- SVG
<g>元素用于將 SVG 形狀組合在一起。 - SVG
<path>元素指示要繪制的矢量是路徑。或者可以是折線或形狀,例如圓形。 - 該
<viewBox>屬性是四個值的串列:min-x、min-y、width和height - 該
xmlns屬性是XML 命名空間,需要使用正確的DTD - Doctype Declaration - 該
<d>屬性定義將被繪制的路徑。
根據我的經驗,使用行內 SVG 時 SVG 的執行速度要快得多。頁面加載的主要阻塞元素是順序加載的大量檔案。使用 inline svg 加載頁面檔案中的所有影像。
SVG 的主要優點是在縮放或以不同解析度查看時矢量在光柵上的可伸縮性。
轉載請註明出處,本文鏈接:https://www.uj5u.com/houduan/465885.html
標籤:javascript html css 反应 svg
上一篇:如何使SVG筆畫顯示背景?
