SVG当中g元素使用变形

<?xml version="1.0" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"

"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"

xmlns="http://www.w3.org/2000/svg">

<g fill="dodgerblue" transform="translate(50,50) scale(0.5) rotate(45,100,100)">

    <rect x="10" y="10" width="40" height="40" ry="10"/>

    <rect x="80" y="80" width="40" height="40" ry="10"/>

    <rect x="150" y="150" width="40" height="40" ry="10"/>

</g>

</svg>

translate(x,y)表示的是移动X轴与Y轴。Y可以省略，省略时候作为0对待

scale(x,x)指定X轴与Y轴的缩放比例，y省略时，按照与x相同的值对待

rotate(degree,cx,cy)以指定点(cx,cy)为中心进行整体选择，degree表示选择的度数，cx,cy省略时候作为0对待