transform
transform
属性定义了一系列应用于元素及其子元素的变换定义。
注意: 作为一个表示属性,transform
也有一个对应的 CSS 属性:transform
。当同时指定两者时,CSS 属性具有优先权。请注意,CSS 属性和此属性在语法上存在一些差异!
元素
在 SVG 2 中,您可以将 transform
属性应用于任何元素,包括 <svg>
根元素。请注意,在 <svg>
根元素上使用 transform
是一项较新的功能,您应检查 浏览器兼容性 以获取支持。在 <svg>
根元素上使用 transform
对于将变换应用于整个 SVG 图像非常方便,无需额外的包装元素或 CSS 解决方法。
在 SVG 1.1 中,只有以下 16 个元素允许应用 transform
:<a>
、<circle>
、<clipPath>
、<defs>
、<ellipse>
、<foreignObject>
、<g>
、<image>
、<line>
、<path>
、<polygon>
、<polyline>
、<rect>
、<switch>
、<text>
和 <use>
。
此外,作为 SVG 1.1 的遗留特性,<linearGradient>
和 <radialGradient>
支持 gradientTransform
属性,而 <pattern>
支持 patternTransform
属性,这两者都与 transform
属性的行为完全相同。
值
值 |
<transform-list>
|
---|---|
默认值 | none |
可动画的 | 是 |
示例
将变换应用于单个 SVG 元素
在此示例中,我们将 transform
应用于 SVG 文档中的单个 <g>
元素。
<svg
viewBox="-40 0 150 100"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<g
fill="grey"
transform="rotate(-10 50 100)
translate(-36 45.5)
skewX(40)
scale(1 0.5)">
<path
id="heart"
d="M 10,30 A 20,20 0,0,1 50,30 A 20,20 0,0,1 90,30 Q 90,60 50,90 Q 10,60 10,30 z" />
</g>
<use href="#heart" fill="none" stroke="red" />
</svg>
将变换应用于整个 SVG 文档
在此示例中,我们将 transform
应用于 <svg>
根元素,这意味着变换将应用于整个 SVG 文档。
<svg
viewBox="-40 0 150 100"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
transform="rotate(-10 50 100)
translate(-36 15.5)
skewX(40)
scale(1 0.5)">
<g fill="grey">
<path
id="heart"
d="M 10,30 A 20,20 0,0,1 50,30 A 20,20 0,0,1 90,30 Q 90,60 50,90 Q 10,60 10,30 z" />
</g>
<use href="#heart" fill="none" stroke="red" />
</svg>
变换函数
transform
属性的 <transform-list>
可以使用以下变换函数。
警告: 根据规范,您应该也可以使用 CSS 变换函数。但是,兼容性不能保证。
Matrix
matrix(<a> <b> <c> <d> <e> <f>)
变换函数以六个值的变换矩阵形式指定一个变换。matrix(a,b,c,d,e,f)
等同于应用变换矩阵
该矩阵通过以下矩阵等式将坐标从之前的坐标系映射到新的坐标系。
示例
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<rect x="10" y="10" width="30" height="20" fill="green" />
<!--
In the following example we are applying the matrix:
[a c e] [3 -1 30]
[b d f] => [1 3 40]
[0 0 1] [0 0 1]
which transform the rectangle as such:
top left corner: oldX=10 oldY=10
newX = a * oldX + c * oldY + e = 3 * 10 - 1 * 10 + 30 = 50
newY = b * oldX + d * oldY + f = 1 * 10 + 3 * 10 + 40 = 80
top right corner: oldX=40 oldY=10
newX = a * oldX + c * oldY + e = 3 * 40 - 1 * 10 + 30 = 140
newY = b * oldX + d * oldY + f = 1 * 40 + 3 * 10 + 40 = 110
bottom left corner: oldX=10 oldY=30
newX = a * oldX + c * oldY + e = 3 * 10 - 1 * 30 + 30 = 30
newY = b * oldX + d * oldY + f = 1 * 10 + 3 * 30 + 40 = 140
bottom right corner: oldX=40 oldY=30
newX = a * oldX + c * oldY + e = 3 * 40 - 1 * 30 + 30 = 120
newY = b * oldX + d * oldY + f = 1 * 40 + 3 * 30 + 40 = 170
-->
<rect
x="10"
y="10"
width="30"
height="20"
fill="red"
transform="matrix(3 1 -1 3 30 40)" />
</svg>
Translate
translate(<x> [<y>])
变换函数将对象按 x
和 y
移动。如果未提供 y
,则假定其值为 0
。
换句话说
xNew = xOld + <x> yNew = yOld + <y>
示例
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<!-- No translation -->
<rect x="5" y="5" width="40" height="40" fill="green" />
<!-- Horizontal translation -->
<rect
x="5"
y="5"
width="40"
height="40"
fill="blue"
transform="translate(50)" />
<!-- Vertical translation -->
<rect
x="5"
y="5"
width="40"
height="40"
fill="red"
transform="translate(0 50)" />
<!-- Both horizontal and vertical translation -->
<rect
x="5"
y="5"
width="40"
height="40"
fill="yellow"
transform="translate(50 50)" />
</svg>
Scale
scale(<x> [<y>])
变换函数指定一个按 x
和 y
进行缩放的操作。如果未提供 y
,则假定其等于 x
。
示例
<svg viewBox="-50 -50 100 100" xmlns="http://www.w3.org/2000/svg">
<!-- uniform scale -->
<circle cx="0" cy="0" r="10" fill="red" transform="scale(4)" />
<!-- vertical scale -->
<circle cx="0" cy="0" r="10" fill="yellow" transform="scale(1, 4)" />
<!-- horizontal scale -->
<circle cx="0" cy="0" r="10" fill="pink" transform="scale(4, 1)" />
<!-- No scale -->
<circle cx="0" cy="0" r="10" fill="black" />
</svg>
Rotate
rotate(<a> [<x> <y>])
变换函数指定一个绕给定点旋转 a
度的操作。如果未提供可选参数 x
和 y
,则旋转是绕当前用户坐标系的 원点进行的。如果提供了可选参数 x
和 y
,则旋转是绕点 (x, y)
进行的。
示例
<svg viewBox="-12 -2 34 14" xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="0" width="10" height="10" />
<!-- rotation is done around the point 0,0 -->
<rect x="0" y="0" width="10" height="10" fill="red" transform="rotate(100)" />
<!-- rotation is done around the point 10,10 -->
<rect
x="0"
y="0"
width="10"
height="10"
fill="green"
transform="rotate(100, 10, 10)" />
</svg>
SkewX
skewX(<a>)
变换函数指定一个沿 x 轴倾斜 a
度的倾斜变换。
示例
<svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg">
<rect x="-3" y="-3" width="6" height="6" />
<rect x="-3" y="-3" width="6" height="6" fill="red" transform="skewX(30)" />
</svg>
SkewY
skewY(<a>)
变换函数指定一个沿 y 轴倾斜 a
度的倾斜变换。
示例
<svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg">
<rect x="-3" y="-3" width="6" height="6" />
<rect x="-3" y="-3" width="6" height="6" fill="red" transform="skewY(30)" />
</svg>
规范
规范 |
---|
CSS 变换模块级别 1 # svg-transform |
Scalable Vector Graphics (SVG) 2 # TransformProperty |
浏览器兼容性
加载中…
另见
- CSS
transform
属性