CSS 設定svg元素樣式

svg元素很多樣式，不但可以由元素自身的屬性設定，也可以通過對應的css屬性來設定。

首先看一段程式碼例項：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
</head>
<body>
  <svg>
    <rect
      x="10" y="10"
      fill="blue"
      width="100" height="100">
    </rect>
  </svg>
</body>
</html>

使用fill屬性設定矩形的填充色為藍色；也可以使用css的對應屬性來設定。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
rect {
  fill:blue;
}
</style>
</head>
<body>
  <svg>
    <rect 
      x="10" y="10" 
      width="100" 
      height="100">
    </rect>
  </svg>
</body>
</html>

下面羅列一下常見的與svg元素對應的css屬性，具體用法不做介紹，大家自行測試。

一.圖形的CSS屬性：

下面的屬性可以設定path路徑或者其他SVG圖形元素的相關樣式。

對應CSS屬性	描述
fill	設定圖形的填充顏色
fill-opacity	設定圖形填充顏色的透明度
fill-rule	設定圖形的填充規則
marker	設定這個圖形上沿直線（邊）使用的marker
marker-start	設定這個圖形上沿直線（邊）使用的開始marker
marker-mid	設定這個圖形上沿直線（邊）使用的中間marker
marker-end	設定這個圖形上沿直線（邊）使用的結束marker
stroke	設定圖形的描邊顏色
stroke-dasharray	設定使用虛線來對圖形進行描邊
stroke-dashoffset	設定圖形描邊虛線的偏移值
stroke-linecap	設定描邊線條線頭的型別。可選擇有round, butt 和 square
stroke-miterlimit	設定描邊的斜接限制
stroke-opacity	設定描邊的透明度
stroke-width	設定描邊的寬度
text-rendering	設定描邊的text-rendering屬性

二.文字的CSS屬性:

對應CSS屬性	描述
alignment-baseline	設定文字在x和y座標系中的對齊方式
baseline-shift	設定文字的基線偏移
dominant-baseline	設定文字的主導基線
glyph-orientation-horizontal	設定水平字形取向
glyph-orientation-vertical	設定垂直字形取向
kerning	設定文字的字距調整

三.漸變的CSS屬性：

對應CSS屬性	描述
stop-color	設定漸變中stop元素的停止顏色
stop-opacity	設定漸變中stop元素的停止透明度

上面簡單列舉了一下常見的對SVG設定的CSS屬性。

CSS 設定svg元素樣式

相關文章