SVG屬性詳解

一、SVG屬性CSS

CSS屬性在SVG文檔中具有與HTML類似的作用。可以在<style>標籤或SVG元素的style屬性中定義CSS樣式。

SVG元素的CSS屬性可用於定義元素的呈現方式，如圖形的填充和輪廓。

例如：

<svg width="100" height="100">
  <rect x="10" y="10" width="80" height="80"
        style="fill:red; stroke:black; stroke-width:2px;" />
</svg>

上述代碼定義了一個100×100的SVG畫布，其中繪製了一個尺寸為80×80，x、y坐標為10的矩形，顏色為紅色，邊框為黑色，寬度為2個像素。樣式屬性中的各個CSS屬性可分別調整圖形的填充、邊框顏色、線寬等各種效果。

二、SVG屬性去除等比例

通常情況下，SVG元素的大小會被默認拉伸或壓縮為與畫布等比例。如果需要將其拉伸或壓縮為不等比例，則需要使用viewBox屬性。

viewBox屬性定義了一個在SVG單元坐標系中的矩形區域，它會被視為一個可見區域。在SVG中，所有路徑、圖形、文本都是在單元坐標系中繪製的，然後根據viewBox屬性的定義進行縮放、平移等變換，以適應實際顯示的大小。

例如：

<svg width="200" height="200" viewBox="0 0 100 50">
  <rect x="10" y="10" width="80" height="30"
        style="fill:red; stroke:black; stroke-width:2px;" />
</svg>

上述代碼中，viewBox屬性的值為「0 0 100 50」，表示坐標系中左上角為(0, 0)，寬為100，高為50的矩形區域。雖然畫布大小為200×200，但是由於viewBox的定義，矩形實際上被縮放至畫布的一半大小。

三、SVG屬性viewBox

在上一節中我們已經學習了viewBox屬性的作用，實際上，它在SVG中是非常重要的一個屬性。

viewBox可以幫助開發者更好地理解SVG，了解如何利用單元坐標系中的圖形繪製出我們想要的效果，並通過縮放、平移等變換展現出來。

例如：

<svg width="200" height="200" viewBox="0 0 1000 500">
  <line x1="0" y1="0" x2="1000" y2="500" stroke="red" stroke-width="5" />
  <line x1="0" y1="500" x2="1000" y2="0" stroke="blue" stroke-width="5" />
</svg>

上述代碼繪製了一個斜叉線條，紅色部分上半部分，藍色下半部分，但是其實線條的實際繪製只有兩條直線，通過viewBox的縮放和平移變換擺放到正確的位置和角度。

四、SVG屬性有transform嗎

transform屬性定義了一個基於屬性值所指定的平移、縮放、旋轉等變換的轉換矩陣，可以用於對SVG的任何元素進行變換。

transform屬性可以包括多個值，每個值都以空格分隔，表示要應用的某種變換類型和參數，具體取決於各個變換函數的要求。

例如：

<svg width="200" height="200">
  <rect x="10" y="10" width="50" height="50"
        transform="rotate(45 35 35)" />
</svg>

上述代碼定義了一個矩形，rotate函數通過調節旋轉角度和旋轉中心，實現對其旋轉變換。

五、SVG屬性

SVG元素中的屬性包括基本的XML屬性，如ID、class、style和XML Namespace等。

有一些特定的SVG屬性也可以用於控制元素的外觀或行為。

例如，fill和stroke屬性用於指定元素的填充色和描邊色。

六、SVG path屬性

SVG路徑屬性用於定義形狀和線條。它被用於<path>元素，其中的屬性d描述了路徑的形狀。

路徑的d屬性值通常是一系列字元，其中包括各種線條和曲線段的命令。這些命令可以用來定義路徑的起點、終點、伸展方式以及繪製線和曲線的方式。

例如：

<svg width="100" height="100">
  <path d="M10,10 L90,90" stroke="black" stroke-width="2" />
</svg>

上述代碼中的d屬性值是”M10,10 L90,90″，表示先移動到坐標(10, 10)，然後繪製一條直線到坐標(90, 90)。stroke和stroke-width屬性用於設置線條顏色和寬度。

七、SVG fill屬性

fill屬性指定了SVG元素的填充色，可以應用於矩形、圓形、橢圓、路徑等各種形狀。

fill屬性可使用不同的值，如純色值、漸變值、圖案值等。

例如：

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" fill="url(#grad1)" />
  <radialGradient id="grad1">
    <stop offset="0%" stop-color="white" />
    <stop offset="100%" stop-color="black" />
  </radialGradient>
</svg>

上述代碼中的fill屬性值是「url(#grad1)」表示使用了ID為grad1的徑向漸變樣式。

八、SVG標籤屬性

SVG標籤屬性用於定義SVG元素的各種屬性，如id、class、style等。

以<rect>元素為例，其屬性包括x、y、width、height、rx、ry、style等。

例如：

<svg width="100" height="100">
  <rect x="10" y="10" width="80" height="50"
        style="fill:red; stroke:black; stroke-width:2px;" />
</svg>

上述代碼定義一個尺寸為80×50的紅色矩形，黑色描邊，2像素寬。

九、SVG標籤常用屬性選取

常用的SVG元素有<rect>、<circle>、<line>、<text>、<polygon>等。

常用的SVG屬性包括：fill、stroke、stroke-width、width、height、x、y、id等。

例如：

<svg width="200" height="200">
  <circle cx="100" cy="100" r="80" stroke="black" stroke-width="2"
          fill="yellow" />
</svg>

上述代碼定義了一個半徑為80的黃色圓形，黑色描邊，2像素寬。