d
語法
css
/* Default */
d: none;
/* Basic usage */
d: path("m 5,5 h 35 L 20,30 z");
d: path("M 0,25 l 50,150 l 200,50 z");
d: path("M 10,5 l 90,0 -80,80 0,-60 80,80 -90,0 z");
/* Global values */
d: inherit;
d: initial;
d: revert;
d: revert-layer;
d: unset;
值
該值可以是帶有單個 <string> 引數的 path() 函式，也可以是關鍵字 none。
none-
不繪製路徑。
path(<string>)-
帶有帶引號的 資料字串 引數的
path()函式。資料字串定義了 SVG 路徑。SVG 路徑資料字串包含隱式使用畫素單位的路徑命令。空路徑被視為無效。
正式定義
正式語法
d =
none |
<string>
示例
指定路徑資料
此示例演示了 d 的基本用例，以及 CSS d 屬性如何優先於 d 屬性。
HTML
我們在 SVG 中包含兩個相同的 <path> 元素；它們的 d 屬性值為 "m 5,5 h 90 v 90 h -90 v -90 z"，它建立了一個 90px 的正方形。
html
<svg>
<path d="m 5,5 h 90 v 90 h -90 v -90 z" />
<path d="m 5,5 h 90 v 90 h -90 v -90 z" />
</svg>
CSS
使用 CSS，我們為兩條路徑設定樣式，提供黑色 stroke 和半透明的紅色 fill。然後，我們使用 d 屬性僅覆蓋最後一條路徑的 SVG d 屬性的值。瀏覽器預設將 SVG 影像渲染為 300px 寬和 150px 高。
css
svg {
border: 1px solid;
}
path {
fill: #ff333388;
stroke: black;
}
path:last-of-type {
d: path(
"M10,30 A20,20 0,0,1 50,30 A20,20 0,0,1 90,30 Q90,60 50,90 Q10,60 10,30 z"
);
}
結果
第二個 <path> 是一個心形，如 CSS d 屬性的 path() 函式值中所定義。未設定樣式的 <path> 的路徑仍然是一個正方形，如其 SVG d 屬性值中所定義。
動畫資料路徑
此示例演示了 d 屬性值的動畫。
HTML
我們建立一個包含單個 <path> 元素的 <svg>。
html
<svg>
<path />
</svg>
CSS
我們使用 d 屬性定義一個帶有一條線的愛心。我們使用 CSS 定義該路徑的 fill、stroke 和 stroke-width，並新增一個兩秒的 transition。我們新增一個 :hover 樣式，其中包含一個略有不同的 path() 函式；該路徑具有與預設狀態相同數量的資料點，使路徑可動畫化。
css
svg {
border: 1px solid;
}
path {
d: path(
"M10,30 A20,20 0,0,1 50,30 A20,20 0,0,1 90,30 Q90,60 50,90 Q10,60 10,30 z M90,5 L5,90"
);
transition: all 2s;
fill: none;
stroke: red;
stroke-width: 3px;
}
svg:hover path {
d: path(
"M10,30 A20,20 0,0,1 50,30 A20,20 0,0,1 90,30 Q90,60 50,90 Q10,60 10,30 z M5,5 L90,90"
);
stroke: black;
}
結果
要檢視動畫，請將滑鼠懸停在 SVG 上。
規範
| 規範 |
|---|
| Scalable Vector Graphics (SVG) 2 # D 屬性 |
瀏覽器相容性
載入中…