SVG锛圫calable Vector Graphics锛夋槸涓€绉嶇敤浜庢弿杩颁簩缁村浘褰㈢殑XML鏍囪璇█锛屽畠鍙互涓嶤SS锛圕ascading Style Sheets锛夐厤鍚堜娇鐢ㄦ潵鎺у埗鍥惧舰鐨勬牱寮忓拰琛ㄧ幇銆備笅闈㈡槸涓€浜涘父瑙佺殑鏂规硶鏉ヤ娇鐢⊿VG鍜孋SS锛?/p>

1. 鍐呰仈鏍峰紡锛氬彲浠ョ洿鎺ュ湪SVG鍏冪礌涓娇鐢╯tyle灞炴€ф潵娣诲姞鍐呰仈鏍峰紡锛屼緥濡傦細

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" style="fill: red; stroke: blue; stroke-width: 2"/>
</svg>

2. 澶栭儴鏍峰紡琛細鍙互灏哠VG鍏冪礌鏀惧湪涓€涓閮ㄧ殑SVG鏂囦欢涓紝鐒跺悗浣跨敤link鏍囩灏嗗閮ㄧ殑CSS鏍峰紡琛ㄩ摼鎺ュ埌SVG鏂囦欢涓紝渚嬪锛?/li>

<link rel="stylesheet" type="text/css" href="styles.css"/>
<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" class="circle"/>
</svg>

styles.css鏂囦欢涓殑鍐呭锛?/p>

.circle {
  fill: red;
  stroke: blue;
  stroke-width: 2;
}

3. 浣跨敤CSS閫夋嫨鍣細鍙互浣跨敤CSS閫夋嫨鍣ㄦ潵閫夋嫨SVG鍏冪礌骞跺簲鐢ㄦ牱寮忥紝渚嬪锛?/li>

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" class="circle"/>
</svg>

.circle {
  fill: red;
  stroke: blue;
  stroke-width: 2;
}

閫氳繃浠ヤ笂鏂规硶锛屽彲浠ュ緢鏂逛究鍦颁娇鐢–SS鏉ユ帶鍒禨VG鍥惧舰鐨勬牱寮忥紝浣垮緱SVG鍥惧舰鍙互鏇村ソ鍦颁笌缃戦〉鐨勫竷灞€鍜岃璁＄浉鍖归厤銆?/p>