style屬性可幫助我們使用CSS聲明來設置元素的樣式。它的工作原理與HTML的style屬性非常相似。幾乎所有元素都使用此屬性。
用法:
style = "<style>"
屬性值:style屬性接受上麵提到的和下麵描述的值。
- 風格:樣式數據的語法取決於所提供的CSS。
以下示例說明了style屬性的用法。
範例1:
HTML
<!DOCTYPE html>
<html>
<body>
<svg viewBox="-10 -5 1220 520"
xmlns="http://www.w3.org/2000/svg">
<defs>
<marker id="geek"
viewBox="0 0 10 10"
refX="1" refY="5"
markerUnits="strokeWidth"
markerWidth="7"
markerHeight="7"
orient="auto">
<path d="M 0 0 L 10 5 L 0 10 z"
fill="green"/>
</marker>
</defs>
<polyline points="20, 20 40, 25 60,
40 80, 120 120, 140 200, 180"
style="fill:none;stroke:green;
stroke-width:3"
marker-end="url(#geek)"/>
</svg>
</body>
</html>
輸出:
範例2:
HTML
<!DOCTYPE html>
<html>
<body>
<svg viewbox="0 0 150 60"
xmlns="http://www.w3.org/2000/svg">
<circle cx="12" cy="12" r="10"
style="fill:lightgreen;
stroke:green;
stroke-width:2;"/>
</svg>
</body>
</html>
輸出:
相關用法
- SVG font-style屬性用法及代碼示例
- SVG <style>用法及代碼示例
- HTML style屬性用法及代碼示例
- HTML <style> media屬性用法及代碼示例
- HTML <style> type屬性用法及代碼示例
- SVG viewBox屬性用法及代碼示例
- SVG rx屬性用法及代碼示例
- SVG width屬性用法及代碼示例
- SVG opacity屬性用法及代碼示例
- SVG stroke-width屬性用法及代碼示例
- SVG stroke屬性用法及代碼示例
- SVG height屬性用法及代碼示例
- SVG ry屬性用法及代碼示例
- SVG fill屬性用法及代碼示例
- SVG font-size屬性用法及代碼示例
注:本文由純淨天空篩選整理自thacker_shahid大神的英文原創作品 SVG style Attribute。非經特殊聲明,原始代碼版權歸原作者所有,本譯文未經允許或授權,請勿轉載或複製。