溫馨提示×

SVG如何與CSS配合使用

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

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

  1. 內聯樣式:可以直接在SVG元素中使用style屬性來添加內聯樣式,例如:
<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標簽將外部的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文件中的內容:

.circle {
  fill: red;
  stroke: blue;
  stroke-width: 2;
}
  1. 使用CSS選擇器:可以使用CSS選擇器來選擇SVG元素并應用樣式,例如:
<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圖形可以更好地與網頁的布局和設計相匹配。

0
亚洲午夜精品一区二区_中文无码日韩欧免_久久香蕉精品视频_欧美主播一区二区三区美女