HTML5如何使用SVG

2021-09-19 15:18:57 字數 4638 閱讀 4414

#####幾個svg小例子：

#####我們來看一下第三個分享圖示的**：

不了解svg的同學現在一定一臉問號，就跟我第一次見他們一樣，別著急，我們從基礎看起。

svg 是一種基於 xml 語法的影象格式，全稱是可縮放向量圖（scalable vector graphics）。其他影象格式都是基於畫素處理的，svg 則是屬於對影象的形狀描述，所以它本質上是文字檔案，體積較小，且不管放大多少倍都不會失真。此外svg 是全球資訊網聯盟的標準，svg 與諸如 dom 和 xsl 之類的 w3c 標準是乙個整體。

在 html5 中，您能夠將 svg 元素直接嵌入 html 頁面中,例如上面的那顆小紅心：

svg **也可以寫在乙個以.svg結尾的檔案中，然後用、、、等標籤插入網頁。
css也可以使用svg

.logo
svg 檔案還可以轉為 base64 編碼，然後作為 data uri 寫入網頁。

1.屬性的值有四個數字，分別是左上角的橫座標和縱座標、視口的寬度和高度。上面**中，svg 影象是100畫素寬 x 100畫素高，viewbox屬性指定視口從(50, 50)這個點開始。所以，實際看到的是右下角的四分之一圓。

注意，視口必須適配所在的空間。上面**中，視口的大小是 50 x 50，由於 svg 影象的大小是 100 x 100，所以視口會放大去適配 svg 影象的大小，即放大了四倍。

如果不指定width屬性和height屬性，只指定viewbox屬性，則相當於只給定 svg 影象的長寬比。這時，svg 影象的預設大小將等於所在的 html 元素的大小。

2.標籤

標籤代表圓形。

上面的**定義了三個圓。標籤的cx、cy、r屬性分別為橫座標、縱座標和半徑，單位為畫素。座標都是相對於上面**中，標籤的x1屬性和y1屬性，表示線段起點的橫座標和縱座標；x2屬性和y2屬性，表示線段終點的橫座標和縱座標；style屬性表示線段的樣式。

4.標籤

標籤用於繪製一根折線。

的points屬性指定了每個端點的座標，橫座標與縱座標之間與逗號分隔，點與點之間用空格分隔。

5.標籤

標籤用於繪製矩形。

的x屬性和y屬性，指定了矩形左上角端點的橫座標和縱座標；width屬性和height屬性指定了矩形的寬度和高度（單位畫素）。

6.標籤

標籤用於繪製橢圓。

的cx屬性和cy屬性，指定了橢圓中心的橫座標和縱座標（單位畫素）；rx屬性和ry屬性，指定了橢圓橫向軸和縱向軸的半徑（單位畫素）。

7.標籤

標籤用於繪製多邊形。

的points屬性指定了每個端點的座標，橫座標與縱座標之間與逗號分隔，點與點之間用空格分隔。

8.標籤

標籤用於制路徑。

的d屬性表示繪製順序，它的值是乙個長字串，每個字母表示乙個繪製動作，後面跟著座標。

m：移動到（moveto）

l：畫直線到（lineto）

z：閉合路徑

9.標籤

標籤用於繪製文字。

的x屬性和y屬性，表示文字區塊基線（baseline）起點的橫座標和縱座標。文字的樣式可以用class或style屬性指定。

10.標籤

標籤用於複製乙個形狀。

的href屬性指定所要複製的節點，x屬性和y屬性是左上角的座標。另外，還可以指定width和height座標。

11.標籤

標籤用於將多個形狀組成乙個組（group），方便復用。

12.標籤標籤用於自定義形狀，它內部的**不會顯示，僅供引用。

13.標籤標籤用於自定義乙個形狀，該形狀可以被引用來平鋪乙個區域。

上面**中，標籤將乙個圓形定義為dots模式。patternunits="userspaceonuse"表示的寬度和長度是實際的畫素值。然後，指定這個模式去填充下面的矩形。

14.標籤

標籤用於插入檔案。

上面**中，的xlink:href屬性表示影象的**。

15.標籤

標籤用於產生動畫效果。

上面**中，矩形會不斷移動，產生動畫效果。

的屬性含義如下。

attributename：發生動畫效果的屬性名。

from：單次動畫的初始值。

to：單次動畫的結束值。

dur：單次動畫的持續時間。

repeatcount：動畫的迴圈模式。

可以在多個屬性上面定義動畫。

16.標籤標籤對 css 的transform屬性不起作用，如果需要變形，就要使用標籤。

上面**中，的效果為旋轉（rotate），這時from和to屬性值有三個數字，第乙個數字是角度值，第二個值和第三個值是旋轉中心的座標。from="0 200 200"表示開始時，角度為0，圍繞(200, 200)開始旋轉；to="360 400 400"表示結束時，角度為360，圍繞(400, 400)旋轉。

1. dom操作

如果 svg **直接寫在 html 網頁之中，它就成為網頁 dom 的一部分，可以直接用 dom 操作。
使用xmlserializer例項的serializetostring()方法，獲取 svg 元素的**。

var svgstring = new xmlserializer()


.serializetostring(document.queryselector('svg'));
4. svg 影象轉為 canvas 影象首先，需要新建乙個image物件，將 svg 影象指定到該image物件的src屬性。

var img = new image();


var svg = new blob([svgstring], );


var domurl = self.url || self.webkiturl || self;


var url = domurl.createobjecturl(svg);


img.src = url;
然後，當影象載入完成後，再將它繪製到元素。

img.onload = function () ;

如何在HTML5中使用SVG

svg 即 scalable vector graphics，是一種用來繪製向量圖的 html5 標籤。你只需定義好xml屬性，就能獲得一致的影象元素。使用svg之前先將標籤加入到html body中。就像其他的html標籤一樣，你可以.svg 即 scalable vector graphics，...

HTML5如何使用SVG的方法示例

優化永遠是程式設計師亙古不變的需求，而合理的利用svg來代替部分png jpg等格式的則是前端優化重要的一環，既然是優化，那我們先來看看svg都有哪些優勢 svg 可被非常多的工具讀取和修改 比如記事本 幾個svg小例子 我們來看一下第三個分享圖示的 不了解svg的同學現在一定一臉問號，就跟我第一次...

HTML5 基礎 SVG實踐

data 和 type 至少指定一項 在react專案中使用svg,建議使用react svg.react svg即乙個封裝後的react元件。它的目的在於利用svginjector把svg新增到dom中。import react from react import reactdom from re...