SVG簡單搞一波

2021-07-25 22:28:04 字數 2144 閱讀 3199

svg

什麼是svg?

svg 指可伸縮向量圖形 (scalable vector graphics)

svg 用來定義用於網路的基於向量的圖形

svg 使用 xml 格式定義圖形

svg 影象在放大或改變尺寸的情況下其圖形質量不會有所損失

svg 是全球資訊網聯盟的標準

svg 與諸如 dom 和 xsl 之類的 w3c 標準是乙個整體

svg有什麼優勢?

• 檔案體積小,能夠被大量的壓縮

• 可無限放大而不失真(向量圖的基本特徵)

• 在視網膜顯示屏上效果極佳

• 能夠實現互動和濾鏡效果

canvas 與 svg 的比較

下表列出了 canvas 與 svg 之間的一些不同之處。

canvas

• 依賴解析度

• 不支援事件處理器

• 弱的文字渲染能力

• 能夠以 .png 或 .jpg 格式儲存結果影象

• 最適合影象密集型的遊戲,其中的許多物件會被頻繁重繪

• canvas 是逐畫素進行渲染的。

svg

• 不依賴解析度

• 支援事件處理器

• 最適合帶有大型渲染區域的應用程式(比如谷歌地圖)

• 複雜度高會減慢渲染速度(任何過度使用 dom 的應用都不快)

• 不適合遊戲應用

svg在ie6-8中沒有支援

製作svg分兩種,一種是自己寫**,一種是使用adobe illustrator來繪成圖形之後儲存為svg格式

引入也分兩種儲存為svg的格式之後,使用跟png和jpg都是差不多的,img或者backgroud:url(***.svg)引入即可;或者直接將svg的**複製到body裡面,支援svg的瀏覽器就能直接顯示了

具體見**中畫svg 詳見

首先先將svg的範圍限定一下

width="100%"

height="100%"

version="1.1"

xmlns="">

svg>

矩形

x="20"

y="20"

width="300"

height="100"

style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)"/>

在範圍中離左上角20,20的地方生成乙個寬300,高100的矩形,填充rgb(0,0,255)的顏色,邊框1px顏色為rgb(0,0,0), 內聯樣式也可以寫在css檔案中

圓形

stroke="black"

stroke-width="2" fill="red"/>

cx,cy圓心的位置,r為半徑

橢圓

cx="300"

cy="150"

rx="200"

ry="80"

style="fill:rgb(200,100,50); stroke:rgb(0,0,100);stroke-width:2"/>

cx 屬性定義圓點的 x 座標,cy 屬性定義圓點的 y 座標,rx 屬性定義水平半徑,ry 屬性定義垂直半徑

x1="0"

y1="0"

x2="300"

y2="300"

style="stroke:rgb(99,99,99);stroke-width:2"/>

x1 屬性在 x 軸定義線條的開始,y1 屬性在 y 軸定義線條的開始

x2 屬性在 x 軸定義線條的結束,y2 屬性在 y 軸定義線條的結束

多邊形

points="220,100 300,210 170,250"

style="fill:#cccccc; stroke:#000000;stroke-width:1"/>

points 屬性定義多邊形每個角的 x 和 y 座標

折線

points="0,0 0,20 20,20 20,40 40,40 40,60"

style="fill:white;stroke:red;stroke-width:2"/>

搞一波php讀取大檔案

先是建立乙個大檔案 cat test.log test.log當然前提是test.log本身有內容,如果你一不留神,可能你的檔案已經很大了,所以最好立即ctrl c ok,現在搞定了乙個大檔案。讓我們先試試直接讀取檔案的方式 begin microtime true file test.log en...

vector理解一波

vector 標頭檔案 include using namespacestd 定義 vector 型別 q 類同於 型別 q vector 型別 q 1010 類同於 型別 q 1010 操作 往vector存入乙個個資料 函式名 w.push back 資料 include include usi...

IT屋一波解答

viewpager 包裹fragment時,重新整理資料問題 1.setuservisiblehint 方法在oncreateview 之前呼叫,所以會throw nullpointexception 2.設定預載入,在viewpager中,現在的版本已經預設是1了。可以設定為mvphome.set...