标签：-name 绘制 vertica 元素 mic tar The 坐标系统 order
来源：https://segmentfault.com/a/1190000015652209
本系列文章分为三个部分:
元素的渲染顺序非常重要，这决定了一个 SVG 中哪些元素可见，哪些元素不可见。SVG 元素的一个规则是“后来居上”，也就是说越后面的元素越可见。
<svg width="100" height="100" style="outline: 2px solid red;">
<rect x="0" y="0" width="50" height="50" fill="blue"/>
<rect x="0" y="0" width="50" height="50" fill="green"/>
</svg>在同一个位置创建了 50 * 50 的两个矩形，由于越后面的元素越可见，因此我们只能看到绿色的矩形，蓝色的矩形被它遮住了。
在 SVG 中，你可以指定值的单位，也可以不指定值的单位。如果不指定值的单位，则默认使用像素 (px) 作为单位。
<svg width="100" height="100">
<circle cx="0" cy="0" r="50%" fill="green">
</svg>width 和 height 都没有指定单位，那么它们的单位就是 px，相当于宽 100px 高 100px。circle 的 r 使用百分比作为单位，因为 100px*50%=50px，则圆的半径 r 等于 50px。
SVG 支持的长度单位包含了常见的 CSS 单位，如下:
| 单位 | 含义 |
|---|---|
| em | 相对于父元素的字体大小 |
| px | 相对于屏幕分辨率 |
| % | 相对于父元素 |
| cm | 即厘米 |
| mm | 即毫米 |
| in | 即英寸 |
| pt | 1/72 英寸 |
| pc | 1/21 |
SVG 画布就是用来绘制 SVG 内容的一个区域。这个画布可以无限延伸，你可以在这个画布的任何位置绘制你想要的内容。
SVG 视窗和浏览器视窗很像。你可以通过 SVG 视窗看到画布，但其实你只看到了画布的一部分，超过视窗的部分会被裁切并且隐藏。就像一个网页，它可能比浏览器的视窗宽，可能比浏览器的视窗长，但只有在视窗内的页面是可见的。
你可以通过给 <svg> 元素设置 width 和 height 来给 SVG 视窗设置宽和高。
当然，你也可以不给视窗设置宽和高，这就会交给用户代理程序去决定，一般默认是 300px * 150px。我们不推荐视窗使用默认的大小，最好还是根据自己的需求去定义。
<!-- 视窗大小为 200px * 200px -->
<svg width="200" height="200">
<circle cx="0" cy="0" r="100" fill="red"/>
</svg>在 200px * 200px 的视窗内，以画布的 0,0 点(画布的原点和视窗的原点默认对齐)为圆心，半径为 100 画圆
因为每个 SVG 元素都有一个默认的 overflow: hidden 样式，所以超过视窗的内容不可见。你也可以通过设置 overflow: visible 让超出视窗边界的内容变得可见。
<svg width="100" height="100">
<circle cx="0" cy="0" r="50" fill="green"/>
</svg>画布和视窗是两个容易混淆的概念，它们各自独立却又相互关联。理解清楚它们之间的关系很有必要。
为了更好的去理解这两个抽象概念，你可以把视窗想象成飞机上的窗户，把画布想象成无穷无尽的风景，只有在这个窗口内的风景才能被看到。
<svg> 元素，就相当于创建了一个无穷大的画布，同时创建了一个视窗。标签：-name 绘制 vertica 元素 mic tar The 坐标系统 order
原文地址：https://www.cnblogs.com/thelongmarch/p/9332889.html
