svgcss svgcss3改颜色

SVG和CSS的融合：实现动态交互式图形设计

SVG（Scalable Vector Graphics）是一种基于XML的矢量图像格式，它允许用户在不失真的情况下放大或缩小图像，而CSS（Cascading Style Sheets）则是一种样式表语言，用于描述HTML或XML（包括SVG）文档的呈现方式，SVG和CSS的结合，可以实现动态交互式的图形设计，为用户提供更加丰富和生动的视觉体验。

我们来看看如何使用SVG创建图形，SVG使用XML语法来定义图形的形状、颜色、大小等属性，我们可以使用以下代码创建一个矩形：

<svg width="100" height="100">
  <rect width="50" height="50" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" />
</svg>

在这个例子中，我们创建了一个100x100像素的SVG画布，然后在画布上绘制了一个50x50像素的矩形，矩形的颜色是蓝色，边框宽度是3像素，边框颜色是黑色。

接下来，我们来看看如何使用CSS来控制SVG图形的样式，我们可以将CSS样式直接写在SVG元素的属性中，也可以将CSS样式写在一个单独的样式表中，然后通过<style>标签将其应用到SVG元素上，我们可以使用以下代码将矩形的边框颜色改为红色：

<svg width="100" height="100">
  <rect width="50" height="50" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(255,0,0)" />
</svg>

在这个例子中，我们将矩形的边框颜色从黑色改为了红色。

除了基本的样式控制，我们还可以使用CSS来实现更复杂的动态效果，我们可以使用CSS动画来让SVG图形移动或旋转，以下是一个简单的例子：

<svg width="200" height="200">
  <circle cx="100" cy="100" r="80" fill="none" stroke="black" stroke-width="4">
    <animateTransform attributeName="transform" type="rotate" from="0 100 100" to="360 100 100" dur="2s" repeatCount="indefinite" />
  </circle>
</svg>

在这个例子中，我们创建了一个圆形，并使用CSS动画让它不断旋转，动画的持续时间是2秒，重复次数是无限次。

SVG和CSS的结合，为我们提供了一种强大的方式来创建动态交互式的图形设计，无论是简单的形状绘制，还是复杂的动画效果，都可以通过SVG和CSS来实现。