SVG精髓(2) - HelloWorld开发者社区

坐标系统

视口

文档打算使用的画布区域称作视口.
我们可以在<svg>上使用 width 和 height 属性确定视口大小.
width height 属性的值是可以带有单位的数字, 也可以是不带单位, 不带单位时, 该数字会被当做用户坐标下的像素.
属性单位是大多是 css 支持的那几个单位 em, ex, px, pt, pc, cm, mm, in.
也可以指定为百分比.

使用默认的用户坐标

svg 的画布就是一个坐标系统. 水平的 x 轴向右递增, 垂直的 y 轴向下递增, 坐标的左上角坐标均为 0 . 这个点写作 (0, 0), 称作原点.

在默认的用户坐标里, 所有没有单位的数值都被视为像素.

为视口指定用户坐标

在 svg 上有一个 viewBox 属性.
这个属性由 4 个数值组成. 他们分别代表替代默认的用户坐标的最小 x 坐标, 最小 y 坐标, 宽度和高度.

<svg width="4cm" height="5cm" viewBox="0 0 64 80">

这表示这 4cm * 5cm 的画布上, 每个厘米有 16 个单位的坐标系统.
如果内部有个正方形

<rect x="10" y="35" width="40" height="40">

这样表示从 (10, 35) 单位开始画一个长 40个单位宽 40 个单位的正方形.

保留宽高比

上一个例子中,宽高比是相同的 (4/5 = 64/80). 但是视口高度的宽高比和viewBox 的宽高比不一样，该怎么办？

svg 为这些情况设置了一个属性 preserveAspectRatio，用它来指定宽高比不同时的对齐方式。

它的使用的格式是：

preserveAspectRatio="alignment [meet | slice]"

我们先来看一下 alignment ，它是一个组合值，用来指定轴和位置。
我们看一下 alignment 的基本值。

xMin: 按视口左侧边缘， viewBox 最小 x 值对齐，
xMid: 按视口水平中心， viewBox 中点 x 值对齐，
xMax: 按视口右侧边缘， viewBox 最大 x 值对齐。

yMin: 按视口顶部边缘， viewBox 最小 y 值对齐，
yMid: 按视口垂直中心， viewBox 中点 y 值对齐，
yMax: 按视口底部边缘， viewBox 最大 y 值对齐。

alignment 值是类似： xMinYMax(表示按照左侧边缘和底部边缘对齐)。

它的后面还有两个值 meet 和 slice，
我们分别来看一下这两个值：

meet 值：它会缩小原本的图片以适配闭合的 viewBox。它会按照较小的尺寸等比例缩放图形，以使图形完全填充视口。

slice 值：它会放大原本的图片以适配闭合的 viewBox。它会按照较大的尺寸等比例缩放图形，并且裁剪超出视口的部分。

其实 preserveAspectRatio 还有一个单独的 none 值，表示图形并不会被等比缩放，而适应完全填充视口。

如果viewBox 的宽高比不同，也没有给定 preserveAspectRatio 的值，那么就会默认给一个 xMidYMid meet值。

演示链接： http://oreillymedia.github.io...

嵌套坐标系统

我们可以将额外的<svg> 元素插入到文档中来建立新的视口和坐标系统。这样我们可以在这个新创建的元素内绘制图形了。

例如以下代码：

<svg width="200px" height="200px" viewBox="0 0 200 200">
    <svg x="100px" y="5px" width="30px" height="80px" viewBox="0 0 50 50" preserveAspectRatio="xMaxYmMax meet">
        <circle cx="25" cy="25" r="25" style="stroke: black;"></circle>
    </svg>
</svg>

这段代码里有两个 <svg> ，里面的元素比外面多了一个 x属性，和y属性。
里面这个元素代表着，我们在外部的元素坐标系统里的 100px 处和 50px处开始，定义一个 width 是 30px ， height 是 80px 的一个新的画布。它允许我们在内部的元素内部，用内部的新的坐标系统中定义图形。

如果尝试为一个外部的 <svg> 带有 preserveAspectRatio 属性使用 meet 或者 slice ，而内部 <svg> 使用 preserveAspectRatio 属性是 none。嵌套元素的宽高比，将按照父 SVG 被压缩或者拉伸的坐标来求值来适配视口。会产生奇怪的效果（图片拉伸，剪裁或者缩放）。

接下来的 svg精髓都放入笔记中了。

SVG精髓（2）完