网页SVG图片如何实现水平翻转垂直翻转旋转滤镜

网页SVG图片如何实现水平翻转垂直翻转旋转滤镜

我们知道SVG元素中，允许添加image图片元素，而且SVG本身支持transform变换滤镜。那么如果需要对SVG中的图片，进行水平翻转，垂直翻转，以及旋转角度，就需要一些处理技巧了。本文分享给大家结合HTML5中的CSS3样式，如何对SVG中的图片进行自由变换。

首先，我们来看CSS3中，如何对网页元素，例如网页图片或文字进行旋转。

拿Chrome浏览器为例。

常用的旋转特效，可以使用

-webkit-transform:rotate(-90deg);

这个代码来实现。

代码中-90表示，逆时针旋转90度。

类似地，我们可以使用CSS3代码

-webkit-transform:rotate(90deg);

实现网页元素，顺时针旋转90度

度数可以是任意整数，注意后面要加上单位deg

如果需要水平翻转，就不能使用rotate

这时可以改用rotateY(180deg)

同样，如果需要垂直翻转，就改用rotateX(180deg)

实现竖直方向的图片翻转。

当然，CSS3中的transform，还可以使用变换矩阵matrix，实现复杂的图片变换。

在SVG中，有类似的transform功能。

其中的transform，与CSS3相比，

同样支持rotate，也支持变换矩阵matrix

并不直接支持rotateX，和rotateY

也就是说，不方便将图片水平翻转，或者垂直翻转。

但是，我们可以借用CSS3中的代码，对网页中SVG元素，进行样式定义。

但有个意外发生，就是SVG中的图片，旋转中心默认以坐标原点，而不是像CSS3那样，以图片中心为旋转中心。

这时，可以对SVG中的图片元素，进行transform变换，

修改一下偏移值，即可将水平或垂直翻转后的图片垂直居中和水平居中了。