SVG坐标系统学习笔记

2019独角兽企业重金招聘Python工程师标准>>>

文章是阅读下面三篇关于SVG坐标和转化的文章的学习笔记, 重点学习了第一部分.

• part1: The viewport, viewBox, and preserveAspectRatio
• part2: The transform Attribute
• part3: Establishing New Viewports

---

part1: The viewport, viewBox, and preserveAspectRatio

SVG画布（svg canvas）

理论上讲，SVG画布在X轴，Y轴上可以无限的延伸，也就是说可以画出任意大小的SVG图形。但是在浏览器中只能渲染（render）到有限的视口（viewport）中，超过视口边界的部分会被减去（clipped off）从而不能在浏览器中看到。

viewport

viewport规定了SVG图形可以看到的区域，于此同时画布的大小（size of canvas）以及preserveAspectRatio决定了用户通过viewport看到的是整幅画布，还是部分画布。

通过设置SVG的width和height属性可以设定viewport，也就是用户可以看到的画布的宽度和高度。当设定了宽度和高度后，浏览器也就建立了初始的视口坐标系统（initial viewport coordinate system）和用户坐标系统（initial user coordinate system）。

初始坐标系统

初始的坐标系统中包含两套坐标系统：

• 初始的视口坐标系统： 建立在viewport基础上（a coordinate system established on the viewport），原点在左上方的（0,0）坐标。x值在x轴上越向右越大，y值在y轴上越向下越大。

• 初始的用户坐标系统：建立在SVG画布基础上（the coordinate system established on the SVG canvas），初始的用户坐标系统和初始的视口坐标系统相同（This coordinate system is initially identical to the viewport coordinate system）。

可以通过使用viewBox属性来使得初始的用户坐标系统和初始的视口坐标系统不相同，使用viewBox设置的坐标系统被称作“当前坐标系统”或者“正在使用的用户空间”。此外，还可以使用transform属性来创建新的“用户空间”或者是“坐标系统”。

viewBox

关于viewBox有以下几点需要注意：

• 可以将viewBox改变的坐标系统认为是“实际的坐标系统（real coordinate system）”，因为用户正是通过使用这套坐标系统将SVG图形绘制到SVG画布上的。

• 如果没有指定viewBox属性的话，那么默认其值为“0 0 width height”，也就是说生成的初始的用户坐标系统和视口坐标系统相同。
• 用户可以通过使用该属性来构建自己的用户坐标系统。如果用户构建的坐标系统和视口坐标系统的纵横比（aspect ratio）不一样的话，可以通过使用preserveAspectRatio属性来指定是否将整个系统显示在视口中，或者是指定图形在视口的位置。
• 使用viewBox需要指定四个值<min-x> <min-y> width height, <min-x>和<min-y>定义了用户自定义坐标系统的左上角（determine the upper left corner of the viewbox），width和height分别指定了用户自定义坐标系统的宽度和高度。
• 可以通过使用viewBox来缩放（scale）、移动（translate）SVG图案。甚至可以通过viewBox来剪切（crop）SVG图案。

下面是关于viewBox的实例：

• 自定义viewBox，和viewport具有相同的纵横比

<svg width="800" height="600" viewbox="0 0 400 300">
    <!-- SVG content drawn onto the SVG canvas -->
</svg>

生成该SVG图形的过程是这样子的：

1. 截取从（0,0）到（400,300）的一块区域。
2. 被截取的区域放大（scale up）来铺满整个视口
3. 用户坐标系统为从（0,0）到（400,300），而视口坐标系统为从（0,0）到（800,600）。因而，用户坐标系统中的一个单元相当于视口坐标系统中两个单元。

值得说的是我们这里<min-x>，<min-y>使用了0,0，如果非0,0的话相当于在0,0的基础之上进行了translate(-<min-x>, -<min-y>)处理，可以从下图中体会。 viewBox="100 100 200 150" viewBox="-100 -100 400 300"

上面两个例子都是viewBox的width和height都小于viewport的width和height并保持纵横比，来看一个width和height都大于viewport的width和height并保持纵横比的例子。 viewbox="0 0 1200 900"

关于viewBox的总结

On one hand, unlike the transform attribute, the automatic transformation that is created due to a viewBox does not affect the x, y, width and height attributes on the element with the viewBox attribute. Thus, in the example above which shows an svg element which has attributes width, height and viewBox, the width and height attributes represent values in the coordinate system that exists before the viewBox transformation is applied. You can see this in the above examples as the initial (grey) viewport coordinate system remains unaffected even after using the viewBox attribute on the <svg>. 翻译---->: 一方面，viewBox效果不同于transform的效果，这是由于viewBox引起的自动转换不会影响x,y,width,height。因而，在上面例子中width和height属性表示在使用viewBox属性引起的转换效果之前的坐标系统。直接结果就是无论viewBox如何变化初始的视口坐标系统使用保持不变。

On the other hand, like the transform attribute, it does establish a new coordinate system for all other attributes and for descendant elements. You can also see that in the above examples as the user coordinate system established is a new one—it does not remain as the initial user coordinate system which was identical to the viewport coordinate system before the viewBox was used. And any descendants of the <svg> will be positioned and sized in the new user coordinate system, not the initial one. 翻译---->: 另一方面，与transform属性一样，使用viewBox属性会为所有的其他属性以及SVG后代节点建立一套新的坐标系统。因而，上述各例中使用了viewBox后创建的用户坐标系统和初始的视口坐标系统不同。SVG元素的任何后代节点会根据新创建的用户坐标系统进行位置的摆放和尺寸的展示。

preserveAspectRatio

The preserveAspectRatio attribute allows you to force uniform scaling of the viewbox, while maintaining the aspect ratio, and it allows you to specify how to position the viewbox inside the viewport if you don't want it to be centered by default. 翻译---->: preserveAspectRatio属性允许用户通过保持纵横比的前提下缩放viewBox的坐标系统到viewport，于此同时可以通过它指定将viewBox坐标系统映射到viewport坐标系统时的对齐方式，如果不想使用默认的居中对齐的话。

preserveAspectRatio的使用语法如下： preserveAspectRatio = defer? <align> <meetOrSlice>?

defer属性只在image元素上有效。

对齐方式align有10中，分别为x，y轴从表示左侧、居中和右侧对齐的三种规格Min，Mid，Max中各自选择一种规格。如xMinyMin, xMinyMid, xMinyMax。外加一个none选项，none选项表示不保持viewBox的纵横比，直接将viewBox缩放到viewport。

meetOrSlice选项规定了是否整个viewBox构造的用户空间系统都在viewport构造的视口坐标系统中可见。默认为meet，表示保持纵横比，并且所有的viewBox系统都可以在viewport系统中可见；

part2: The transform Attribute

transform functions

The transform attribute is used to specify one or more transformations on an element. The possible SVG transformations are: rotation, scaling, translation, and skewing. Transform value is defined as a list of transform definitions, which are applied in the order provided. The individual transform definitions are separated by whitespace and/or a comma.

所有的演示都是基于一下代码为最初始状态

<svg width="800" height="600" viewBox="0 0 800 600">
    <g id="parrot">
        <!-- shapes and paths forming the parrot -->
    </g>
    <g id="dog">
        <!-- shapes and paths forming the dog -->
    </g>
</svg>

Translation

translate(<tx> [<ty>])

tx represents the translation value along the x-axis; ty represents the translation value along the y-axis.

The ty value is optional; and, if omitted, it defaults to zero.

<svg width="800" height="800" viewBox="0 0 800 600">
    <g id="parrot" transform="translate(150 200)">
        <!-- shapes and paths forming the parrot -->
    </g>
    <!-- ... -->
</svg>

首先，来看结果图

其次，新的坐标系统图

最后，总结起来就是说，新建立的坐标系统只是原来的坐标系统的一个复制，鹦鹉每个点在新坐标系统中的坐标同原来在最初始的坐标系统中的取值并未发生变化，并且坐标系统的范围同样未发生变化都是（800,600）。变化的是两个坐标系统的原点位置，新建立的坐标原点为初始坐标系统的（150, 200）。

It's important to notice here that the new current coordinate system established on the element is a replicate of the initial user space, with the position of the element preserved inside it. This means that it is not established on the element's bounding box, nor is the size of the new current coordinate system restricted to the size of the element.

Scaling

scale(<sx> [<sy>])

sx represents the scaling value along the x-axis, used to stretch or shrink the element horizontally; sy represents the scaling value along the y-axis, used to stretch or shrink the element vertically.

The sy value is optional; and, if omitted, it is assumed to be equal to sx.

It is important to note here that when an SVG element is scaled, its entire current coordinate system is scaled, resulting in the element also being repositioned inside the viewport.

<svg width="800" height="800" viewBox="0 0 800 600">
    <g id="parrot" transform="scale(2)">
        <!-- shapes and paths forming the parrot -->
    </g>
    <!-- ... -->
</svg>

首先，看最后效果图

其次，新的坐标系统图

最后，总结起来，鹦鹉每个点在新坐标系统中的坐标同原来在最初始的坐标系统中的取值同样并未发生任何变化，并且两个坐标系统的原点在同一位置，变化的是现在的坐标系统范围是（400,300）而原来的是（800,600），新的坐标系统中单位长度在原始坐标系统中表示两个单位长度。

Skew

skewX(<skew-angle>)
skewY(<skew-angle>)

The skewX function specifies a skew transformation along the x-axis; and the skewY function specifies a skew transformation along the y-axis.

Rotation

rotate(<rotate-angle> [<cx> <cy>])

Nested and Chained Transformations

When transformations are chained, the most important thing to be aware of is that, just like with HTML element transformations, each transformation is applied to the coordinate system after that system is transformed by the previous transformations.

part3: Establishing New Viewports

未学习...

转载于:https://my.oschina.net/alazyer/blog/737930