CSS 在SVG元素上的变换（IE9+）

在本文中，我们将介绍如何在SVG元素上使用CSS变换效果。CSS变换可以改变SVG元素的形状、位置和尺寸，使其具有更丰富的交互和视觉效果。

阅读更多：CSS 教程

什么是SVG？

SVG（Scalable Vector Graphics）是一种用于描述二维矢量图形的XML标记语言。相比于传统的位图图形，SVG图形可以无损放缩，并且具有更高的清晰度和更小的文件大小。SVG元素可以通过CSS样式来装饰和操作，使其更加灵活和可定制。

CSS变换基础

CSS变换通过transform属性来实现，常用的变换方法包括平移、旋转、缩放和倾斜。在SVG元素上同样可以应用这些变换方法。我们通过一个简单的例子来演示这些效果：

<svg width="200" height="200">
  <rect width="50" height="50" fill="red"></rect>
</svg>

上述代码创建了一个200×200像素的SVG画布，并在其中放置了一个50×50像素的红色矩形。现在，我们将通过CSS变换对其进行进一步的处理。

平移变换

平移变换可以将元素沿水平或垂直方向进行移动。例如，我们要将矩形向右移动50像素：

rect {
  transform: translateX(50px);
}

旋转变换

旋转变换可以将元素按照给定的角度进行旋转。例如，我们要将矩形顺时针旋转45度：

rect {
  transform: rotate(45deg);
}

缩放变换

缩放变换可以调整元素的尺寸，使其变大或变小。例如，我们要将矩形在水平和垂直方向上分别放大1.5倍：

rect {
  transform: scale(1.5);
}

倾斜变换

倾斜变换可以倾斜元素的水平或垂直方向。例如，我们要将矩形在水平方向上倾斜45度：

rect {
  transform: skewX(45deg);
}

SVG元素的CSS变换

CSS变换对于SVG元素同样适用。我们可以将CSS变换应用于任何SVG元素，如矩形、圆形、路径等。以下是一个使用CSS变换的完整SVG示例：

<svg width="200" height="200">
  <circle cx="100" cy="100" r="50" fill="blue"></circle>
  <path d="M150 50 L200 200 L100 200 Z" fill="green"></path>
  <rect x="50" y="50" width="50" height="50" fill="red"></rect>
</svg>

变换中心点

CSS变换默认以元素的中心点作为变换中心。如果需要改变变换中心点，可以使用transform-origin属性。例如，我们将矩形的变换中心点设置为左上角：

rect {
  transform-origin: top left;
}

变换顺序

CSS变换按照从右到左的顺序应用。这意味着后面的变换会基于前面的变换结果来进行。例如，我们先将矩形向右平移50像素，然后再将其顺时针旋转45度：

rect {
  transform: rotate(45deg) translateX(50px);
}

兼容性和IE9+

CSS变换在现代浏览器中得到了广泛支持，包括Chrome、Firefox、Safari、Edge等。然而，在IE9及更早版本的Internet Explorer中，不支持CSS变换。为了在这些浏览器中实现类似的效果，我们需要使用其他方法，如JavaScript或SVG SMIL动画。

总结

本文介绍了如何在SVG元素上使用CSS变换效果。通过CSS变换，我们可以改变SVG元素的形状、位置和尺寸，为其添加更多的交互和视觉效果。同时，我们还了解了CSS变换的基本用法，如平移、旋转、缩放和倾斜，并在示例中进行了演示。最后，我们提到了CSS变换在IE9+浏览器中的兼容性问题，并介绍了一些解决方法。希望本文对你理解并应用CSS变换到SVG元素上有所帮助。