一、SVG图片的引入与基本样式设置

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>

svg {
  width: 200px;
  height: 200px;
}
circle {
  fill: blue;
  stroke: green;
  stroke-width: 5px;
}

二、CSS3渐变与阴影

1. 线性渐变

以下是一个使用线性渐变填充圆形的示例：

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:red;stop-opacity:1" />
      <stop offset="100%" style="stop-color:blue;stop-opacity:1" />
    </linearGradient>
  </defs>
  <circle cx="50" cy="50" r="40" fill="url(#gradient)" />
</svg>

2. 阴影效果

以下是一个添加阴影效果的示例：

circle {
  stroke: green;
  stroke-width: 5px;
  filter: drop-shadow(2px 2px 5px rgba(0,0,0,0.5));
}

三、CSS3转换与动画

1. 转换效果

以下是一个使用CSS3转换旋转圆形的示例：

circle {
  transition: transform 1s;
}

circle:hover {
  transform: rotate(90deg);
}

2. 动画效果

以下是一个使用CSS3动画使圆形放大和缩小的示例：

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <circle id="circle" cx="50" cy="50" r="40" fill="red" />
</svg>

@keyframes scale {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}

#circle {
  animation: scale 2s infinite;
}

四、总结