stroke-width屬性是定義應用於形狀的筆觸寬度的屬性。
用法:
stroke-width="length"
屬性值:
- length:我們要設置stroke-width屬性的長度
- percentage:我們要設置stroke-width屬性的百分比
我們將使用stroke-width屬性來設置元素的寬度。
範例1:在此示例中,我們將使用stroke-width屬性通過長度值設置rect的寬度。
<!DOCTYPE html>
<html>
<body>
<svg viewBox="0 0 110 80"
xmlns="http://www.w3.org/2000/svg">
<circle cx="15" cy="15" r="3"
stroke="green" stroke-width="11" />
</svg>
</body>
</html>
輸出:
範例2:在此示例中,我們將使用stroke-width屬性使用百分比值設置rect的寬度。
<!DOCTYPE html>
<html>
<body>
<svg viewBox="0 0 110 80"
xmlns="http://www.w3.org/2000/svg">
<circle cx="20" cy="20" r="6"
stroke="green" stroke-width="20%" />
</svg>
</body>
</html>
輸出
相關用法
- Fabric.js Ellipse strokeWidth屬性用法及代碼示例
- Fabric.js Triangle strokeWidth屬性用法及代碼示例
- Fabric.js line strokeWidth屬性用法及代碼示例
- Fabric.js Polygon strokeWidth屬性用法及代碼示例
- Fabric.js Polyline strokeWidth屬性用法及代碼示例
- Fabric.js Image strokeWidth屬性用法及代碼示例
- Fabric.js Group strokeWidth屬性用法及代碼示例
- SVG viewBox屬性用法及代碼示例
- SVG rx屬性用法及代碼示例
- SVG width屬性用法及代碼示例
- SVG opacity屬性用法及代碼示例
- SVG stroke屬性用法及代碼示例
- SVG height屬性用法及代碼示例
- SVG ry屬性用法及代碼示例
- SVG fill屬性用法及代碼示例
- SVG font-size屬性用法及代碼示例
- SVG stroke-dasharray屬性用法及代碼示例
- SVG cx屬性用法及代碼示例
注:本文由純淨天空篩選整理自taran910大神的英文原創作品 SVG stroke-width Attribute。非經特殊聲明,原始代碼版權歸原作者所有,本譯文未經允許或授權,請勿轉載或複製。