SVG小记——transform属性，建立新视窗

transform属性值有效地SVG变换有：旋转rotate, 缩放scale, 移动translate, 和倾斜skew。

坐标系变化

transform属性被定义成两个在被添加的元素上建立新用户空间（当前坐标系）之一-viewBox属性是创建新用户空间的两个属性中的另一个。
HTML和SVG的变换的不同是坐标系。
HTML元素的坐标系建立在元素自身之上。而SVG元素的坐标系最初是当前坐标系或使用中的用户空间。

---

建立新视窗

嵌套<svg>元素

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- some SVG content -->
    <svg>
        <!-- some inner SVG content -->
    </svg>
<svg>

第一件需要注意的是内容svg>元素不需要声明一个命名空间xmlns因为默认和外层<svg>的命名空间相同。当然，如果在HTML5文档中外层<svg>也不需要命名空间。

• 你可以使用一个嵌套的SVG来把元素组合在一起然后在父SVG中定位它们。现在，你也可以把元素组合在一起并且使用组<g>来定位，可使用transform属性在画布中定位它们。
  然而，使用<svg>肯定好过使用<g>。使用x和y坐标来定位，在许多情况下，比使用变换更加方便。另外，<svg>元素接受宽高值，<g>不行。这意味着，<svg>也许并必要的，因为它可以创建一个新的viewport和坐标系，你可以不需要也不想要。
• 通过给<svg>声明宽高值，你把内容限制在通过x,y,width和height属性定义的viewport的边界。任何超过边界的内容会被裁切。
• 如果你不声明x和y属性，它们默认是0。如果你不声明height和width属性，<svg>会是父SVG宽度和高度的100%。
• 声明用户坐标系而不是默认的也会影响内部<svg>的内容。
• 如果最外层<svg>的宽度为100%（例如，如果它在一个文档中内联或者你想要它可以流动），内层SVG会扩展拉伸来保持宽度为外层SVG的一半-这是强制的。

---

当我们像这样创建一个响应式SVG，整个画布以及所有绘制在上面的元素都会有反应并且同时改变。但有时候，你只想让图形中的一个元素变为响应式，并且保持其他东西“固定”在一个位置和/或尺寸。这时候嵌套svg就很有用。

svg元素有独立于它父元素的坐标系，它可以有独立的viewBox和preserveAspectRatio属性，你可以任意修改里面内容的尺寸和位置。

【单个元素】：可以把它包裹在<svg>元素中，并且给svg一个弹性的宽度来适应最外层SVG的宽度，然后声明【preserveAspectRatio=”none”】，里面的图形会扩展和拉伸到容器的宽度。
【多个元素】：可以对SVG中每个独立的元素根据SVG视窗声明一个位置，所以随着SVG 视窗尺寸的改变（即最外层svg的改变），每个元素独立于其他元素发生改变。

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <svg viewBox="0 0 315 385" preserveAspectRatio="xMidYMid meet">
        <!-- the chicken illustration -->
        <g id="chicken">
            <!-- ... -->
        </g>
        <!-- path forming the lower shell -->
        <path id="lower-shell" fill="url(#gradient)" stroke="#000000" stroke-width="1.5003" d="..."/>
    </svg>

    <svg id="upper-shell" viewBox="0 0 315 385" preserveAspectRatio="xMidYMin meet">
        <!-- path forming the upper shell -->
        <path id="the-upper-shell" fill="url(#gradient)" stroke="#000000" stroke-width="1.5003" d="..."/>
    </svg>
</svg>

我们开始一个SVG-在我们的例子中，这是一张里面藏着一个小鸡的带裂纹的蛋。然后，我们创建了另一“层”并把上部分的壳放在里面-这一层通过使用嵌套svg创建。嵌套svg和外层svg的尺寸和viewBox一样。最终，内层SVG的viewBox被设置成不管屏幕尺寸是多少都“固定”在viewport的顶部-这确保了当屏幕尺寸很窄时SVG被拉长，上层的壳被向上举起，因此展示出“隐藏”在里面的小鸡。
一旦屏幕尺寸拉伸，SVG被拉长，使用preserveAspectratio=”xMidYMin meet”把包含上部分壳的viewBox被定位到viewport的顶部。

---

转载出处：http://www.w3cplus.com/html5/svg-transformations.html