3. 文档结构
-
在SVG中使用样式（四种方式，可以联想对照HTML样式方法）
-
内联样式, 直接在标签里设置style属性
-
内部样式表，可以同时为多个元素设置样式
这里使用了
<![CDATA[...]]>块包裹<style>元素内的CSS代码（在XML文档中的所有文本都会被解析器解析，只有在CDATA部件之内的文本会被解析器忽略） -
外部样式表，将样式写在一个外部文件中，供一个或多个SVG文档使用
* { fill: none; stroke: black; } rect { stroke-dasharray: 7 3;} .thick { stroke-width: 5; }...
... -
表现属性，SVG允许我们将style里面的声明直接当做SVG元素的属性使用。以下两段代码效果是相同的。
表现属性是所有样式中优先级最低的，但会覆盖继承的样式。
-
- SVG提供了一些元素，允许我们对元素进行分组，从而使文档更加结构化、更易理解。
<g>元素<g>元素会将其所有子元素作为一个组合，通常组合还会有一个唯一的id作为名称。每个组合还可以拥有自己的<title>和<desc>。并为子元素提供一些注解，使得文档结构更为清晰。在<g>标签中定义的样式，会应用到所有子元素上。 （元素g是用来组合对象的容器。添加到g元素上的变换会应用到其所有的子元素上。添加到g元素的属性会被其所有的子元素继承。此外，g元素也可以用来定义复杂的对象，之后可以通过<use>元素来引用它们。）<use>元素SVG使用<use>元素，为定义在<g>元素内的组合或任意独立图形元素提供了类似复制粘贴的能力。<defs>元素SVG 允许我们定义以后需要重复使用的图形元素。 建议把所有需要再次使用的引用元素定义在defs元素里面。这样做可以增加SVG内容的易读性和可访问性。 在defs元素中定义的图形元素不会直接呈现。 你可以在你的视口的任意地方利用 <use>元素呈现这些元素。<symbol>元素symbol元素用来定义一个图形模板对象，它可以用一个<use>元素实例化。symbol元素对图形的作用是在同一文档中多次使用，添加结构和语义。结构丰富的文档可以更生动地呈现出来，类似讲演稿或盲文，从而提升了可访问性。注意，一个symbol元素本身是不呈现的。只有symbol元素的实例（亦即，一个引用了symbol的 <use>元素）才能呈现。<image>元素image元素可以包含一个完整的SVG或者栅格文件。
4. 坐标系统变换
可以对照CSS3的Transform属性学习理解。
| 变换 | 描述 |
|---|---|
| translate(x, y) | 按照指定的x和y值移动用户坐标系统。如果没有指定y值，则假定为0 |
| scale(xFactor, yFactor) | 使用指定的xFactor和yFactor乘以所有的用户坐标系统。比例值可以是小数或则负数 |
| scale(factor) | 和scale(factor, factor)相同 |
| rotate(angle, centerX, centerY) | 按照指定的angle旋转用户坐标。旋转中心由centerX和centerY指定 |
| skewX(angle) | 根据指定的angle倾斜所有x坐标。从视觉上讲，这会让垂直线出现角度 |
| skewY(angle) | 根据指定的angle倾斜所有y坐标。从视觉上讲，这会让水平线出现角度 |
| matrix(a b c d e f) | 指定一个六个值组成的矩阵变换 |
Tip: 如何围绕中心点缩放？
要围绕某个点按照给定的比例缩放对象可以这么做：
translate(-centerX * (factor - 1), -centerY * (factor - 1))scale(factor)
还可以将stroke-width的值也除以缩放系数，从而让缩放后的轮廓保持同样的宽度。
原文链接：