1. 首頁 > 生活百科 > >

帶你了解HTML5 SVG，看看怎么繪制自適應的菱形( 二 )

小知識it知識


div{ background: url('data:image/svg+xml;base64,PHN2ZyBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiB2aWV3Qm94PSIwIDAgMTY3IDkwIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIHZlY3Rvci1lZmZlY3Q9Im5vbi1zY2FsaW5nLXN0cm9rZSIgZD0iTTIuMTA4IDQ1TDgzLjUgMS4xMzYgMTY0Ljg5MiA0NSA4My41IDg4Ljg2NCAyLjEwOCA0NXoiIGZpbGw9IiNGRkVDQzciIGZpbGwtb3BhY2l0eT0iLjYiIHN0cm9rZT0iI0ZGQjIwMCIgc3Ryb2tlLXdpZHRoPSIyIi8+PC9zdmc+')}這樣就得到了一個自適應的菱形背景了

帶你了解HTML5 SVG，看看怎么繪制自適應的菱形

文章插圖

當然 ， 轉換成 base64 后就不能實時修改顏色了 ， 需要整體替換
完整代碼可以訪問 SVG diamond
https://codepen.io/xboxyan/pen/abVRwmz
五、總結一下從這個例子就可以看出 SVG 的天然優勢了 ， 特別是描邊的縮放特性 ， 如果用 CSS 來繪制估計要遇到不少麻煩 。 這里總結一下實現要點：
    SVG 一般通過設計軟件繪制導出就行 ， 不需要手寫
    SVG 默認是保持原比例縮放的 ， 可以通過 preserveAspectRatio 修改縮放規則
    SVG 描邊的粗細默認會跟隨整體尺寸縮放 ， 可以通過 vector-effect 設置保持原始大小
    SVG 在轉成 base64 后仍然具備以上特性 ， 更適合用作背景圖片
SVG 一直在圖形繪制上更具優勢 ， 特別是這類幾何圖形 ， 縮放、自適應更加靈活 ， 如果 CSS 實現有困難 ， 不妨考慮一下 SVG 。 最后 ， 如果覺得還不錯 ， 對你有幫助的話 ， 歡迎點贊、收藏、轉發
（學習視頻分享：web前端）
以上就是帶你了解HTML5 SVG ， 看看怎么繪制自適應的菱形的詳細內容 ， 更多請關注電腦自學網其它相關文章！

推薦閱讀