SVG如何与CSS配合使用

SVG（Scalable Vector Graphics）是一种用于描述二维图形的XML标记语言，它可以与CSS（Cascading Style Sheets）配合使用来控制图形的样式和表现。下面是一些常见的方法来使用SVG和CSS：

内联样式：可以直接在SVG元素中使用style属性来添加内联样式，例如：

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

外部样式表：可以将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;}

使用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图形可以更好地与网页的布局和设计相匹配。