溫馨提示×

SVG如何與CSS配合使用

svg
小樊
290
2024-06-14 21:44:31
欄目: 編程語言

SVG（Scalable Vector Graphics）是一種用于描述二維圖形的XML標(biāo)記語言，它可以與CSS（Cascading Style Sheets）配合使用來控制圖形的樣式和表現(xiàn)。下面是一些常見的方法來使用SVG和CSS：

  1. 內(nèi)聯(lián)樣式：可以直接在SVG元素中使用style屬性來添加內(nèi)聯(lián)樣式，例如：
<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" style="fill: red; stroke: blue; stroke-width: 2"/>
</svg>
  1. 外部樣式表：可以將SVG元素放在一個外部的SVG文件中，然后使用link標(biāo)簽將外部的CSS樣式表鏈接到SVG文件中，例如：
<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文件中的內(nèi)容：

.circle {
  fill: red;
  stroke: blue;
  stroke-width: 2;
}
  1. 使用CSS選擇器：可以使用CSS選擇器來選擇SVG元素并應(yīng)用樣式，例如：
<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" class="circle"/>
</svg>

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

通過以上方法，可以很方便地使用CSS來控制SVG圖形的樣式，使得SVG圖形可以更好地與網(wǎng)頁的布局和設(shè)計相匹配。

0 踩