css3 svg 特性

CSS3 SVG（Scalable Vector Graphics，可缩放矢量图形）是一种基于 XML 的图形格式，支持高品质的图形渲染，也能被 CSS 样式控制，更重要的是它可以适应不同的分辨率而无损失地缩放。CSS3 SVG 技术让我们可以更加灵活地控制网页的呈现效果。

CSS3 SVG 的一个重要特性是支持使用 CSS 样式来渲染 SVG 图形。通过定义 SVG 标签的 CSS 样式，可以实现简易的图形效果，比如描边、填充颜色、变形等。使用CSS3 SVG 实现这些图形效果，不用去写 SVG 的复杂代码，即可轻松实现这些需求。

 
/*定义SVG的样式*/

svg {
  width: 100%; /*svg图像使用的宽度*/
  height: auto; /*svg图像自动适应高度*/
  fill: #FFF; /*定义图形填充的颜色*/
  stroke-width: 10; /*定义描边的宽度*/
  stroke: #333; /*定义描边的颜色*/
  transform: rotate(45deg); /*定义SVG图像旋转的角度*/
}

CSS3 SVG 还支持一些高级的图形效果，比如　filter、mask 和　blend mode 等。其中最常用的是　filter。

/*定义SVG的效果*/
.svg-filter {
  filter: url(#blur);
}

/* SVG 模糊效果 */

通过上述的 CSS3 SVG 技术，我们可以轻松实现网页中丰富多彩的图形效果，让页面更加精美，更加生动。这里，我们只列举了一些 CSS3 SVG 的基本特性和用法，若想更深入地学习SVG 技术的同学可以继续深入学习。