Web笔记-html中svg的基本使用
生活随笔
收集整理的這篇文章主要介紹了
Web笔记-html中svg的基本使用
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
程序運行截圖如下：
代碼如下：
<!DOCTYPE html> <html> <head> </head><body><svg width="200" height="200"><rect x="0" y="0" width="100" height="100" fill="red"></rect><line x1="100" y1="0" x2="200" y2="100" stroke="green" stroke-width="1"></line><polygon points="0,100 0,200 100,200" fill="red"></polygon><circle cx="150" cy="150" r="50" stroke-width="1" stroke="green" fill="red"></circle></svg> </body></html>svg是矢量繪圖，和canvas一樣是一個標簽。
?
瀏覽器中只有Dom元素才能被選中。
?
svg是通過svg標簽來繪圖。
canvas通過JavaScript API來繪圖。
?
canvas繪制的圖是不能被選中的。
svg是可以被選中的，每一個元素都是個dom。
?
Svg不管放多大，都可以保持在可升縮的范圍內。而canvas放大就鋸齒了（可以對其進行抗鋸齒）。
?
Canvas適合做動畫。
Svg適合做展示相關的。
總結
以上是生活随笔為你收集整理的Web笔记-html中svg的基本使用的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： MySQL笔记-简单配置主从库
- 下一篇： Web前端笔记-two.js实现坐标定位