SVG如何与CSS配合使用

avatar
作者
猴君
阅读量:7

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

广告一刻

为您即时展示最新活动产品广告消息,让您随时掌握产品活动新动态!