當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

SVG入门理解

發布時間：2025/3/8 编程问答 29 豆豆

生活随笔收集整理的這篇文章主要介紹了 SVG入门理解小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

SVG入門
- SVG 元素
- 簡單的形狀
  - rect
  - circle
  - ellipse
  - line
  - text
  - path
- SVG 樣式
- 分層和繪圖順序
- 透明度

SVG入門

當我們用SVG生成和操作一些炫酷的效果時,D3是最佳選擇。使用div和其他原生HTML元素繪圖也是可以的，但是太笨重，而且會受到不同瀏覽器的限制，傳達出的視覺效果會有不一致的影響。使用SVG更可靠，視覺上更一致，最重要的就是方便，快捷。

像Illustrator這樣的矢量繪圖軟件可用于生成SVG文件，但我們更需要學習如何使用代碼生成它們。

SVG 元素

可縮放矢量圖形是基于文本的圖像格式。每一個SVG圖像都是使用類似HTML的標識代碼定義生成的。SVG代碼可以直接包含在任何HTML文檔中。除了IE 8及更早的版本外，其他每一個Web瀏覽器都支持SVG。

SVG是基于XML的，因此你會注意到沒有結束標記的元素必須是自動關閉的，例如：

在繪制任何SVG圖像之前，必須創建一個SVG元素。將SVG元素視為渲染視覺效果的畫布。其實這方面，SVG在概念上有點類似于HTML中的canvas元素。SVG是可以指定寬度和高度的，如果不指定那么SVG將在其封閉元素中占用盡可能多的空間大小。

下面是一個指定空間大小的SVG：

如果你將這段代碼放在你的HTML中，會形成一塊空白區域，此時你可以鼠標右鍵選擇空白區域，選擇檢查，將會發現：

會看一個SVG元素，它占用了500個水平像素和50個垂直像素。但是看起來不像，下面解釋。

瀏覽器將像素視為默認度量單位。我們指定的尺寸是500和50，而不是500px和50px。我們可以明確指定px,或者是任意數量的其他被支持的單位，比如：em，pt，in，cm，mm。

簡單的形狀

SVG標記之間包含很多可視化的元素，包括rect，circle，ellipse，line，text和path。

如果你比較熟悉計算機圖形編程，那么你一定知道通常基于像素的坐標系統，其中(0,0)是我們桌面的最左上角。在(x,y)中，x表示x軸，y代表y軸，此時增加x值向右移動，而增加y值向下移動。

圖像代碼如下：

rect

使用rect繪制一個矩形。使用x和y指定左上角的坐標，使用寬度和高度指定尺寸。這個矩形填滿了SVG整個空間：

效果：

circle

circle標簽可以畫一個圓圈。使用cx和cy指定中心的坐標，使用r指定半徑。這個圓圈位于我們500個像素寬的SVG中間，因為它的cx(center x)值為250。

效果：

ellipse

ellipse和circle是類似的，但是每個軸需要單獨的半徑值，由rx和ry指定。

效果：

line

line是畫一條直線。使用x1和y1指定線一端的坐標，使用x2和y2指定另一端的坐標。必須為要顯示的線指定畫筆顏色。

效果：

text

text用來渲染文字的。使用x指定左邊緣的位置，使用y指定類型基線的垂直位置。

效果：

如果沒有有意指定text的字體樣式，那么text將繼承其父元素的CSS指定字體樣式（稍后詳細介紹樣式文本）。上面的文字樣式，我們可以自定義設置，如下：

效果：

另外注意，當任何可視化元素在SVG的邊緣上運行時，它將被剪裁。使用文字時要小心，否則會出現y操作設置無效，當我們將基線y設置為50時，可以看到這種情況發生，與SVG的高度相同。

效果：

path

path用于繪制比上面的形狀更復雜的東西（如地圖的國家輪廓），這個后續我們再做介紹，現在暫時使用一些簡單的形狀入門。

SVG 樣式

SVG的默認樣式是黑色填充，沒有畫筆。如果需要其他任何內容，則必須將樣式應用于元素。

常見的SVG屬性是：

fill - 填充的顏色。與CSS一樣，顏色可以指定為
- named colors - orange
- hex values - #3388aa or #38a
- RGB values - rgb(10, 150, 20)
- RGB width alpha transparency - rgba(10, 150, 20, 0.5)
stroke - Stroke屬性定義一條線，文本或元素輪廓顏色
stroke-width - 定義了一條線，文本或元素輪廓厚度
opacity - 透明度，一個在0.0-1.0之間的數值

使用text，您還可以使用這些屬性，就像在CSS中一樣：

font-family
font-size

其實SVG的樣式可以使用CSS樣式規則。

以下是一些直接應用于圓形的樣式屬性作為屬性：

效果:

或者，我們可以去除樣式屬性，為圓圈分配一個class(就像它是一個普通的HTML元素)

然后將fill，stroke和stroke-width規則放入以新類為目標的CSS樣式中：

.pumpkin {fill: yellow;stroke: orange;stroke-width: 5;}

CSS方法有一些明顯的好處：

可以同時對多個元素進行樣式設定，比如：

CSS代碼更方便閱讀（相比內聯屬性）

CSS代碼可能更易于維護，并且可以更快的實現設計更改要求

但是，使用CSS代碼定義SVG的樣式可能會讓一些人感到不安。畢竟，fill，stroke和stroke-width不是CSS屬性。（與之CSS等價物是背景顏色和邊框）。

分層和繪圖順序

Layering and Drawing Order(分層和繪圖順序)。

在SVG中沒有層，也沒有真正的深度概念，就好比z-index。SVG不支持CSS的z-index屬性，因此形狀只能排列在二維x，y平面內。

然而，如果我們繪制多個形狀，它們會發生重疊，如下：

效果：

元素編碼的順序決定了對應元素的深度順序。紫色方塊第一個出現，因此第一個被渲染，然后藍色方塊呈現在紫色方塊的頂部，接下來就是綠色方塊，依此類推。

當有一些不應該被其他元素遮擋的視覺元素時，繪制順序就變得很重要。例如，在一個散點圖上顯示軸或值標簽，軸和標簽應該是最后渲染，所以它們出現在任何其他元素的上層。

透明度

Transparency(透明度)

當可視化中的元素重疊但是又必須保持可見，這時可以使用透明度；或者希望突出顯示其他元素和不強調某些元素時，透明度就非常有用。

有兩種方法可以應用透明度：

使用帶有alpha的RGB顏色
設置不透明度值。

可以在任何一個設定顏色的元素中使用rgba()，例如填充或者描邊。對于紅色，綠色和藍色，rgba() 需要0到255之間的三個值，以及介于0.0到1.0之間的alpha(透明度)值。

例如：

效果：

使用rgba() 時，透明度將獨立應用于填充和描邊顏色。以下圓圈填充的是75%不透明，而它們的筆畫只有25%不透明：

效果：

將透明度應用于整個元素，請設置不透明度屬性。這是一些完全不透明的圓圈。

效果：

下面是不同透明度的圓圈:

效果圖：

總結

以上是生活随笔為你收集整理的SVG入门理解的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

入门
svg