recursal/MDN huggingface dataset:
<radialGradient>
================

**`<radialGradient>`** 用来定义径向渐变，以对图形元素进行填充或描边。

**备注：** 不要与 CSS `radial-gradient()` (en-US) 搞混了，CSS 渐变只能应用在 HTML 元素上，而 SVG 渐变只能运用在 SVG 元素上。

示例
--
```

html,
body,
svg {
  height: 100%;
}
```



```html
<svg
 viewBox="0 0 10 10"
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <radialGradient id="myGradient">
      <stop offset="10%" stop-color="gold" />
      <stop offset="95%" stop-color="red" />
    </radialGradient>
  </defs>

  <!-- 使用自定义的径向渐变 -->
  <circle cx="5" cy="5" r="4" fill="url('#myGradient')" />
</svg>
```

属性
--

`cx`

这个属性定义了径向渐变的终点圆的 X 坐标。*值类型*：**<length>**；*默认值*：`50%`；*动画性*：**有**

`cy`

这个属性定义了径向渐变的终点圆的 Y 坐标。*值类型*：**<length>**；*默认值*：`50%`；*动画性*：**有**

`fr`

这个属性定义了径向梯度的起点圆的半径。渐变的绘制将使 0% `<stop>` 被映射到起始圆的周长。*值类型*：**<length>**；*默认值*：`0%`；*动画性*：**有**

`fx`

这个属性定义了径向渐变的起点圆的 X 坐标。*值类型*：**<length>**；*默认值*：与 `cx` 相同；*动画性*：**有**

`fy`

这个属性定义了径向渐变的起点圆的 Y 坐标。*值类型*：**<length>**；*默认值*：与 `cy` 相同；*动画性*：**有**

`gradientUnits (en-US)`

这个属性定义了 `cx`、`cy`、`r`、`fx`、`fy`、`fr` 属性的坐标系统；*值类型*：`userSpaceOnUse`|`objectBoundingBox`；*默认值*：`objectBoundingBox`；*动画性*：**有**

`gradientTransform (en-US)`

这个属性为梯度坐标系提供了额外的变换。*值类型*：**<transform-list>** ；*默认值*：*identity transform*；*动画性*：**有**

`href (en-US)`

这个属性定义了对另一个将被用作模板 `<radialGradient>` 元素的引用。*值类型*：**<URL>**；*默认值*：none；*动画性*：**有**

`r`

这个属性定义了径向渐变的终点圆的半径。梯度的绘制将使 100% 的`<stop>` 被映射到终点圆的周长。*值类型*：**<length>**；*默认值*：`50%`；*动画性*：**有**

`spreadMethod (en-US)`

这个属性表明，如果渐变在包含渐变的形状的边界内开始或结束，它将如何表现。*值类型*：`pad`|`reflect`|`repeat`；*默认值*：`pad`；*动画性*：**有**

`xlink:href (en-US)`

**已弃用:** 不再推荐使用该特性。虽然一些浏览器仍然支持它，但也许已从相关的 web 标准中移除，也许正准备移除或出于兼容性而保留。请尽量不要使用该特性，并更新现有的代码；参见本页面底部的兼容性表格以指导你作出决定。请注意，该特性随时可能无法正常工作。

对另一个将被用作模板的 `<radialGradient>` 元素的 <IRI> 引用。*值类型*：**<IRI>**；*默认值*：none；*动画性*：**有**

### 全局属性

核心属性 (en-US)

最重要的：`id`

样式属性
`class (en-US)`、`style`
事件属性

全局事件属性 (en-US)、文档元素事件属性 (en-US)

表现属性 (en-US)

最重要的：`clip-path`、`clip-rule (en-US)`、`color`、`color-interpolation (en-US)`、`color-rendering`、`cursor (en-US)`、`display`、`fill`、`fill-opacity`、`fill-rule`、`filter`、`mask`、`opacity`、`pointer-events`、`shape-rendering`、`stroke`、`stroke-dasharray`、`stroke-dashoffset`、`stroke-linecap`、`stroke-linejoin`、`stroke-miterlimit`、`stroke-opacity`、`stroke-width`、`transform`、`vector-effect`、`visibility`

XLink 属性
`xlink:href (en-US)`、`xlink:title (en-US)`
使用说明
----

|  |  |
| --- | --- |
| 类别 | 渐变元素 |
| 允许的内容 | 任意数量、任意顺序的下列元素：描述性元素`<animate>`、`<animateTransform>`、`<set>`、`<stop>` |

规范
--

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # RadialGradients |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
use
===

`use` 元素在 SVG 文档内取得目标节点，并在别的地方复制它们。它的效果等同于这些节点被深克隆到一个不可见的 DOM 中，然后将其粘贴到 `use` 元素的位置，很像 HTML5 中的克隆模板元素。因为克隆的节点是不可见的，所以当使用 CSS 样式化一个 `use` 元素以及它的隐藏的后代元素的时候，必须小心注意。隐藏的、克隆的 DOM 不能保证继承 CSS 属性，除非你显式设置使用 CSS 继承。

出于安全原因，一些浏览器可能在 use 元素上应用同源策略，还有可能拒绝载入 xlink:href 属性内的跨源 URI。

用法
--

|  |  |
| --- | --- |
| 类别 | 图形元素、图形引用元素、结构元素 |
| 允许的内容 | 任意数量、任意顺序的下列元素：动画元素描述性元素 |

示例
--


```xml
<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <style>
    .classA { fill:red }
  </style>
  <defs>
    <g id="Port">
      <circle style="fill:inherit" r="10"/>
    </g>
  </defs>

  <text y="15">black</text>
  <use x="50" y="10" xlink:href="#Port" />
  <text y="35">red</text>
  <use x="50" y="30" xlink:href="#Port" class="classA"/>
  <text y="55">blue</text>
  <use x="50" y="50" xlink:href="#Port" style="fill:blue"/>
 </svg>
```

属性
--

### 全局属性

* 条件处理属性 »
* 核心属性 »
* 图形事件属性 »
* 外观属性 »
* Xlink 属性 »
* `class (en-US)`
* `style`
* `externalResourcesRequired`
* `transform`
### 专有属性

* `x`
* `y`
* `width`
* `height`
* `xlink:href (en-US)`
DOM 接口
------

该元素实现了 `SVGUseElement`接口。

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
ellipse
=======

`ellipse`元素是一个 SVG 基本形状，用来创建一个椭圆，基于一个中心坐标以及它们的`x`半径和`y`半径。

椭圆不能指定精确的椭圆倾向（假设，举个例子，你想画一个 45 度角倾斜的椭圆），但是可以利用`transform`属性实现旋转。

用法
--

|  |  |
| --- | --- |
| 类别 | 基本形状元素、图形元素、形状元素 |
| 允许的内容 | 任意数量、任意顺序的下列元素：动画元素描述性元素 |

示例
--
```

html,
body,
svg {
  height: 100%;
}
```



```html
<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
  <ellipse cx="100" cy="50" rx="100" ry="50" />
</svg>
```

属性
--

### 全局属性

* 条件处理属性 »
* 核心属性 »
* 图形事件属性 »
* 外观属性 »
* `class (en-US)`
* `style`
* `externalResourcesRequired`
* `transform`
### 专有属性

* `cx`
* `cy`
* `rx`
* `ry (en-US)`
DOM 接口
------

该元素实现了 `SVGEllipseElement` 接口。

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* `<circle>`
svg
===

* 如果 svg 不是根元素，`svg` 元素可以用于在当前文档（比如说，一个 HTML 文档）内嵌套一个独立的 svg 片段。这个独立片段拥有独立的视口和坐标系统。
用法
--

|  |  |
| --- | --- |
| 类别 | 容器元素、结构元素 |
| 允许的内容 | 任意数量、任意顺序的下列元素：动画元素描述性元素形状元素结构化元素渐变元素`<a>`、`<clipPath>`、`<color-profile>`、`<cursor>`、`<filter>`、`<font>`、`<font-face>`、`<foreignObject>`、`<image>`、`<marker>`、`<mask>`、`<pattern>`、`<script>`、`<style>`、`<switch>`、`<text>`、`<view>` |

示例
--

思考下下面的 svg 图片（代表意大利国旗）：


```xml
<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg"
 width="150" height="100" viewBox="0 0 3 2">

  <rect width="1" height="2" x="0" fill="#008d46" />
  <rect width="1" height="2" x="1" fill="#ffffff" />
  <rect width="1" height="2" x="2" fill="#d2232c" />
</svg>
```


它可以包含在 html5 文档里，如下所示：


```html
<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>HTML/SVG Example</title>
  </head>

  <body>
    <svg width="150" height="100" viewBox="0 0 3 2">
      <rect width="1" height="2" x="0" fill="#008d46" />
      <rect width="1" height="2" x="1" fill="#ffffff" />
      <rect width="1" height="2" x="2" fill="#d2232c" />
    </svg>
  </body>
</html>
```

属性
--

### 全局属性

* 条件处理属性 (en-US) »
* 核心属性 (en-US) »
* 文档事件属性 (en-US) »
* 图形事件属性 (en-US) »
* 外观属性 (en-US) »
* `class (en-US)`
* `style`
* `externalResourcesRequired`
### 专有属性

* `version`
* `baseProfile`
* `x`
* `y`
* `width`
* `height`
* `preserveAspectRatio`
* `contentScriptType`
* `contentStyleType`
* `viewBox`
DOM 接口
------

该元素实现了 `SVGSVGElement` (en-US) 接口。

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
g
=

元素`g`是用来组合对象的容器。添加到`g`元素上的变换会应用到其所有的子元素上。添加到`g`元素的属性会被其所有的子元素继承。此外，`g`元素也可以用来定义复杂的对象，之后可以通过`<use>`元素来引用它们。

用法
--

|  |  |
| --- | --- |
| 类别 | 容器元素、结构元素 |
| 允许的内容 | 任意数量、任意顺序的下列元素：动画元素描述性元素形状元素结构化元素渐变元素`<a>`、`<clipPath>`、`<color-profile>`、`<cursor>`、`<filter>`、`<font>`、`<font-face>`、`<foreignObject>`、`<image>`、`<marker>`、`<mask>`、`<pattern>`、`<script>`、`<style>`、`<switch>`、`<text>`、`<view>` |

示例
--


```html
<svg
 width="100%"
 height="100%"
 viewBox="0 0 95 50"
 xmlns="http://www.w3.org/2000/svg">
  <g stroke="green" fill="white" stroke-width="5">
    <circle cx="25" cy="25" r="15" />
    <circle cx="40" cy="25" r="15" />
    <circle cx="55" cy="25" r="15" />
    <circle cx="70" cy="25" r="15" />
  </g>
</svg>
```

属性
--

### 全局属性

* 条件处理属性 (en-US) »
* 核心属性 (en-US) »
* 图形事件属性 (en-US) »
* 外观属性 (en-US) »
* `class (en-US)`
* `style`
* `externalResourcesRequired`
* `transform`
### 专有属性

*没有专有属性。*

DOM 接口
------

该元素实现了 `SVGGElement` 的所有接口。

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
glyph
=====

一个`glyph`元素定义了 SVG 字体中的一个独立的字形。

用法
--

|  |  |
| --- | --- |
| 类别 | 文本内容元素 |
| 允许的内容 | 任意数量、任意顺序的下列元素：动画元素描述性元素形状元素结构化元素渐变元素`<a>`、`<clipPath>`、`<color-profile>`、`<cursor>`、`<filter>`、`<font>`、`<font-face>`、`<foreignObject>`、`<image>`、`<marker>`、`<mask>`、`<pattern>`、`<script>`、`<style>`、`<switch>`、`<text>`、`<view>` |

示例
--


```xml
<?xml version="1.0" standalone="yes"?>
<svg width="400px" height="300px" version="1.1"
 xmlns = 'http://www.w3.org/2000/svg'>
<!-- Example copied from http://www.w3.org/TR/SVG/fonts.html#GlyphElement -->
  <defs>

    <font id="Font1" horiz-adv-x="1000">
      <font-face font-family="Super Sans" font-weight="bold" font-style="normal"
 units-per-em="1000" cap-height="600" x-height="400"
 ascent="700" descent="300"
 alphabetic="0" mathematical="350" ideographic="400" hanging="500">
        <font-face-src>
          <font-face-name name="Super Sans Bold"/>
        </font-face-src>
      </font-face>

      <missing-glyph><path d="M0,0h200v200h-200z"/></missing-glyph>
      <glyph unicode="!" horiz-adv-x="80" d="M0,0h200v200h-200z"></glyph>
      <glyph unicode="@" d="M0,50l100,300l400,100z"></glyph>

    </font>
  </defs>
  <text x="100" y="100"
 style="font-family: 'Super Sans', Helvetica, sans-serif;
 font-weight: bold; font-style: normal">Text
    using embe@dded font!</text>
</svg>
```

属性
--

### 全局属性

* 核心属性 »
* 外观属性 »
* `class (en-US)`
* `style`
### 专有属性

* `d`
* `horiz-adv-x (en-US)`
* `vert-origin-x (en-US)`
* `vert-origin-y (en-US)`
* `vert-adv-y (en-US)`
* `unicode (en-US)`
* `glyph-name (en-US)`
* `orientation (en-US)`
* `arabic-form (en-US)`
* `lang (en-US)`
DOM 接口
------

该元素实现了 `SVGGlyphElement` 接口。

相关内容
----

* `<font>`
* `<missing-glyph>`
* SVG 教程：SVG 字体
title
=====

SVG 绘图中的每个窗口元素或图形元素都可以提供一个`title`描述性字符串，该描述只能是纯文本。如果当前的 SVG 文档片段在可视媒体中呈现为 SVG，title 元素不会呈现为绘图的一部分。然而，一些用户代理可能会，举个例子，把`title`显示为一个提示冒泡。替代性提词既可以看到也可以听到，它显示了 title 元素但是不会显示路径元素或者别的图形元素。`title`元素通常提升了 SVG 文档的无障碍。

通常`title`元素必须是它的父元素的第一个子元素。注意，只有当`title`是它的父元素的第一个子元素的时候，那些编译器才会把`title`显示为一个提示冒泡。

用法
--

|  |  |
| --- | --- |
| 类别 | 描述性元素 |
| 允许的内容 | 任意元素或字符数据 |

示例
--

下面的代码片段显示了 SVG `<title>`标签的用法。


```xml
<svg width="500" height="300" xmlns="http://www.w3.org/2000/svg">
  <g>
    <title>SVG Title Demo example</title>
    <rect x="10" y="10" width="200" height="50"
 style="fill:none; stroke:blue; stroke-width:1px"/>
  </g>
</svg>
```

属性
--

### 全局属性

* 核心属性 »
* `class (en-US)`
* `style`
### 专有属性

*没有专有属性。*

DOM 接口
------

该元素实现了 `SVGTitleElement` 接口。

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* `<desc>`
feFuncB
=======

该滤镜为它的父`<feComponentTransfer>`元素的输入图形的蓝色成分定义了变换函数。

用法
--

|  |  |
| --- | --- |
| 类别 | 无 |
| 允许的内容 | 任意数量、任意顺序的下列元素：`<animate>`、`<set>` |

示例
--

属性
--

### 全局属性

* 核心属性 »
### 专有属性

* 变换函数属性 »
DOM 接口
------

该元素实现了 `SVGFEFuncBElement` 接口。

参见
--

* `<filter>`
* `<animate>`
* `<set>`
* `<feComponentTransfer>`
* `<feFuncA>`
* `<feFuncR>`
* `<feFuncG>`
* SVG 教程：滤镜效果
animateMotion
=============

`<animateMotion>` 元素定义了一个元素如何沿着运动路径进行移动。

**备注：** 为了复用一个已经定义的路径，就有必要使用一个 `<mpath>` 元素嵌入到 `<animateMotion>` 中，而不是使用 `path`。

示例
--


```css
html,
body,
svg {
  height: 100%;
  margin: 0;
  padding: 0;
  display: block;
}
```



```xml
<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
  <path fill="none" stroke="lightgrey"
 d="M20,50 C20,-50 180,150 180,50 C180-50 20,150 20,50 z" />

  <circle r="5" fill="red">
    <animateMotion dur="10s" repeatCount="indefinite"
 path="M20,50 C20,-50 180,150 180,50 C180-50 20,150 20,50 z" />
  </circle>
</svg>
```

用法
--

|  |  |
| --- | --- |
| 类别 | 动画元素 |
| 允许的内容 | 任意数量、任意顺序的下列元素：描述性元素`<mpath>` |

属性
--

### Global 属性

* 条件处理属性 (en-US) »
* 核心属性 (en-US) »
* 动画事件属性 (en-US) »
* Xlink 属性 (en-US) »
* 动画定时属性 (en-US) »
* 动画值属性 (en-US) »
* An 动画累加属性 (en-US) »
* `externalResourcesRequired`
### 专有属性

* `calcMode (en-US)`
* `path`
* `keyPoints (en-US)`
* `rotate (en-US)`
* `origin`
DOM 接口
------

该元素实现了 `SVGAnimateMotionElement` 接口。

规范
--

| Specification |
| --- |
| SVG Animations Level 2 # AnimateMotionElement |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

相关内容
----

* `<mpath>`
SVG In HTML Introduction
========================

本文及其相关示例展示了如何使用内联的 SVG 给一个表单提供背景图片，它展示了如何按照编写常规 XHTML 代码相同的方式来通过 JavaScript 和 CSS 操作图片。注意，该示例仅在支持 XHTML（非 HTML）并集成了 SVG 的浏览器中正常工作。

源码
--

源码如下： 查看示例
```

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>XTech SVG Demo</title>
<style>
  stop.begin { stop-color:yellow; }
  stop.end { stop-color:green; }
  body.invalid stop.end { stop-color:red; }
  #err { display:none; }
  body.invalid #err { display:inline; }
</style>
<script>
  function signalError() {
    document.getElementById('body').setAttribute("class", "invalid");
  }
</script>
</head>
<body id="body"
  style="position:absolute; z-index:0; border:1px solid black; left:5%; top:5%; width:90%; height:90%;">
<form>
  <fieldset>
    <legend>HTML Form</legend>
    <p><label>Enter something:</label>
    <input type="text"/>
    <span id="err">Incorrect value!</span></p>
    <p><input type="button" value="Activate!" onclick="signalError();" /></p>
  </fieldset>
</form>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
  viewBox="0 0 100 100" preserveAspectRatio="xMidYMid slice"
  style="width:100%; height:100%; position:absolute; top:0; left:0; z-index:-1;">
  <linearGradient id="gradient">
    <stop class="begin" offset="0%"/>
    <stop class="end" offset="100%"/>
  </linearGradient>
  <rect x="0" y="0" width="100" height="100" style="fill:url(#gradient)" />
  <circle cx="50" cy="50" r="30" style="fill:url(#gradient)" />
</svg>
</body>
</html>
```

讨论
--

该页面主要是常规的 XHTML、CSS 和 JavaScript，唯一有趣的部分就是包含了 <svg> 元素。该元素及其子元素都被声明在 SVG 的命名空间内。它包含一个渐变和两个渐变填充的形状。该渐变颜色的终值颜色由 CSS 设置，当用户在表单中输入了错误信息，脚本会给 <body> 设置一个 `invalid` 属性，样式规则将渐变颜色的`end-stop`颜色设置为红色（另一个样式规则用于展示错误提示信息）

该方法有如下几点需要注意：

* 我们单独举出了一个可能存在的网站构成部分——表单，并为其添加了吸引人的、交互性的背景
* 该方法通过不展示背景图片的方式，向后兼容了不支持 SVG 的浏览器
* 它非常简单且运行良好
* 这个图片能够智能的自动适应其需要的大小
* 我们可以给 HTML 和 SVG 都显式声明样式规则
* 相同的脚本同时操作了 HTML 和 SVG
* 该文档完全符合标准

**备注：** 如果需要给一个内嵌的 SVG 元素通过 DOM 方法添加一个有外链的图片，我们需要使用 `setAttributeNS` 来设置外链地址 `href`. 示例如下：


```js
var img = document.createElementNS("http://www.w3.org/2000/svg", "image");
img.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", "move.png");
```


细节
--

viewBox 属性创建了一个与 SVG 图片坐标系相关联的逻辑坐标系，通过这种方式我们的图片被放置到了一个 100x100 的视觉系中。

`preserveAspectRatio` 属性指定了需要预设的数据，即指定了再有效大小内图片的居中、适配图片最大宽高，并裁切掉了多余部分。

样式属性指定了 SVG 在 form 背景中的位置。

参见
--

* Another SVG in XHTML example: A swarm of motes (en-US)
* Working example 可以同时工作在安装有 Adobe SVG Viwer 的 Mozilla 和 IE 浏览器中。 （对于同时工作在 Firefox 和 IE 浏览器中得内联 SVG，需要为每个浏览器的服务文档设置不同的 Cotent-type。因为当你基于一个代理服务器获取页面的时候，如果在第二个浏览器中加载该案例将会失败，因其会获取错误的 Content-Type）
文本
==

* « 上一页
* 下一页 »

在 SVG 中有两种截然不同的文本模式。一种是写在图像中的文本，另一种是 SVG 字体。关于后者我们将在教程的后面进行讲解，现在我们主要集中前者：写在图像中的文本。

基础
--

我们已经在之前入门示例中看到了，在一个 SVG 文档中，`text` 元素内部可以放任何的文字。


```xml
<text x="10" y="10">Hello World!</text>
```


属性 x 和属性 y 性决定了文本在视口中显示的位置。属性`text-anchor`，可以有这些值：start、middle、end 或 inherit，允许决定从这一点开始的文本流的方向。

和形状元素类似，属性`fill`可以给文本填充颜色，属性`stroke`可以给文本描边，形状元素和文本元素都可以引用渐变或图案，相比较 CSS2.1 只能绘制简单的彩色文字，SVG 显得更具有优势。

设置字体属性
------

文本的一个至关重要的部分是它显示的字体。SVG 提供了一些属性，类似于它们的 CSS 同行，用来激活文本选区。下列每个属性可以被设置为一个 SVG 属性或者成为一个 CSS 声明：`font-family`、`font-style`、`font-weight`、`font-variant`、`font-stretch`、`font-size`、`font-size-adjust`、`kerning`、`letter-spacing`、`word-spacing`和`text-decoration`。

其他文本相关的元素
---------

### tspan

该元素用来标记大块文本的子部分，它必须是一个`text`元素或别的`tspan`元素的子元素。一个典型的用法是把句子中的一个词变成粗体红色。


```xml
<text>
  <tspan font-weight="bold" fill="red">This is bold and red</tspan>
</text>
```


`tspan`元素有以下的自定义属性：

**x**
 为容器设置一个新绝对`x`坐标。它覆盖了默认的当前的文本位置。这个属性可以包含一个数列，它们将一个一个地应用到`tspan`元素内的每一个字符上。

**dx**
 从当前位置，用一个水平偏移开始绘制文本。这里，你可以提供一个值数列，可以应用到连续的字体，因此每次累积一个偏移。

此外还有属性**y**和属性**dy**作垂直转换。

**rotate**
 把所有的字符旋转一个角度。如果是一个数列，则使每个字符旋转分别旋转到那个值，剩下的字符根据最后一个值旋转。

**textLength**
 这是一个很模糊的属性，给出字符串的计算长度。它意味着如果它自己的度量文字和长度不满足这个提供的值，则允许渲染引擎精细调整字型的位置。

#### tref

`tref`元素允许引用已经定义的文本，高效地把它复制到当前位置。你可以使用`xlink:href`属性，把它指向一个元素，取得其文本内容。你可以独立于源样式化它、修改它的外观。


```xml
<text id="example">This is an example text.</text>

<text>
    <tref xlink:href="#example" />
</text>
```


#### textPath

该元素利用它的`xlink:href`属性取得一个任意路径，把字符对齐到路径，于是字体会环绕路径、顺着路径走：


```xml
<path id="my\_path" d="M 20,20 C 40,40 80,40 100,20" fill="transparent" />
<text>
  <textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#my\_path">
    This text follows a curve.
  </textPath>
</text>
```

* « 上一页
* 下一页 »
基础变形
====

* « 上一页
* 下一页 »

现在我们准备好开始扭曲我们美丽的图像了。但是首先，让我们正式地介绍`<g>`元素。利用这个助手，你可以把属性赋给一整个元素集合。实际上，这是它唯一的目的。一个示例：


```xml
<g fill="red">
  <rect x="0" y="0" width="10" height="10" />
  <rect x="20" y="0" width="10" height="10" />
</g>
```


输出两个红色矩形。

所有接下来的变形都会用一个元素的`transform`属性总结。变形可以连缀，只要把它们连接起来就行，用空格隔开。

平移
--

你能把元素移动一段距离，甚至你可以根据相应的属性定位它。`translate()`变形方法专门效力于这个目的。


```xml
<rect x="0" y="0" width="10" height="10" transform="translate(30,40)" />
```


该示例将呈现一个矩形，移到点 (30,40)，而不是出现在点 (0,0)。

如果没有指定第二个值，它默认被赋值*0*。

旋转
--

旋转一个元素是相当常见的任务。使用`rotate() 变形就可以了：`


```xml
<rect x="20" y="20" width="20" height="20" transform="rotate(45)" />
```


该示例显示了一个方形，旋转了 45 度。`rotate()`的值是用角度数指定的。

斜切
--

利用一个矩形制作一个斜菱形。可用`skewX()`变形和`skewY()`变形。每个需要一角度以确定元素斜切到多远。

缩放
--

`scale() 变形`改变了元素的尺寸。它需要两个数字，作为比率计算如何缩放。0.5 表示收缩到 50%。*如果第二个数字被忽略了，它默认等于第一个值。*

用 `matrix()` 实现复杂变形
-------------------

所有上面的变形可以表达为一个 2x3 的变形矩阵。组合一些变形，可以直接用 `matrix(a, b, c, d, e, f)` 变形设置结果矩阵，利用下面的矩阵，它把来自上一个坐标系统的坐标映射到新的坐标系统：



{

x

new

C
o
o
r
d
S
y
s

=
a

x

prev
C
o
o
r
d
S
y
s

+
c

y

prev

C
o
o
r
d
S
y
s

+
e


y

new

C
o
o
r
d
S
y
s

=
b

x

prev

C
o
o
r
d
S
y
s

+
d

y

prev
C
o
o
r
d
S
y
s

+
f

\left{ \begin{matrix} x\*{\mathrm{prevCoordSys}} = a x\*{\mathrm{newCoordSys}} + c y\*{\mathrm{newCoordSys}} + e \ y\*{\mathrm{prevCoordSys}} = b x\*{\mathrm{newCoordSys}} + d y\*{\mathrm{newCoordSys}} + f \end{matrix} \right.


请看关于 SVG 变形文档的具体实例。关于该属性的详细信息可以在 SVG 推荐标准上找到。

坐标系统上的效果
--------

如果使用了变形，你会在元素内部建立了一个新的坐标系统，应用了这些变形，你为该元素和它的子元素指定的单位可能不是 1:1 像素映射。但是依然会根据这个变形进行歪曲、斜切、转换、缩放操作。


```xml
<g transform="scale(2)">
  <rect width="50" height="50" />
</g>
```


上面示例中的结果矩形将是 100x100px，如果你使用了比如说 userSpaceOnUse 等属性，将出现更吸引人的效果。

SVG 嵌在 SVG 内部
-------------

比之 HTML，SVG 允许你无缝嵌入别的 svg 元素。因此你可以利用内部`svg`元素的属性`viewBox`、属性`width`和属性`height`简单创建一个新的坐标系统。


```xml
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <svg width="100" height="100" viewBox="0 0 50 50">
    <rect width="50" height="50" />
  </svg>
</svg>
```


以上示例基本上跟它上面的示例有同样的效果，也就是矩形将是指定的两倍大。

* « 上一页
* 下一页 »
SVG image 元素
============

* « 上一页
* 下一页 »

SVG 的 `<image>` 元素允许在一个 SVG 对象内部呈现光栅图像。

在这个基本示例中，`href (en-US)` 属性引用了一个将呈现在 SVG 对象中的 .jpg 图像：


```xml
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="5cm" height="4cm" version="1.1"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <image href="firefox.jpg" x="0" y="0" height="50px" width="50px"/>
</svg>
```


这里有一些重要的事情需要注意（引用自 W3 规范文档）：

* 如果你没有设置 x 属性或 y 属性，它们自动被设置为 0。
* 如果你没有设置 height 属性或 width 属性，它们自动被设置为 0。
* 如果 width 属性或 height 等于 0，将不会呈现这个图像。
* « 上一页
* 下一页 »
入门
==

* « 上一页
* 下一页 »
一个简单的示例
-------

让我们直接从一个简单的例子开始，看一下下面代码：


```xml
<svg version="1.1"
 baseProfile="full"
 width="300" height="200"
 xmlns="http://www.w3.org/2000/svg">

  <rect width="100%" height="100%" fill="red" />

  <circle cx="150" cy="100" r="80" fill="green" />

  <text x="150" y="125" font-size="60" text-anchor="middle" fill="white">SVG</text>

</svg>
```


复制并粘贴代码到文件 demo1.svg。然后在浏览器中打开该文件。它将会呈现为下面的截图。（Firefox 用户点击这里）

![svgdemo1.png](/zh-CN/docs/Web/SVG/Tutorial/Getting_Started/svgdemo1.png)

绘制流程包括以下几步：

1. 从 `<svg>` 根元素开始：
    * 应舍弃来自 (X)HTML 的 doctype 声明，因为基于 DTD 的 SVG 验证导致的问题比它能解决的问题更多。
    * SVG 2 之前 `version` 属性和 `baseProfile` 属性用来供其他类型的验证识别 SVG 的版本。SVG 2 已弃用 `version` 和 `baseProfile` 这两个属性。
    * 作为 XML 的一种方言，SVG 必须正确的绑定命名空间（在 xmlns 属性中绑定）。请阅读命名空间速成页面获取更多信息。
2. 绘制一个完全覆盖图像区域的矩形 `<rect>`，把背景颜色设为红色。
3. 一个半径 80px 的绿色圆圈 `<circle>` 绘制在红色矩形的正中央（向右偏移 150px，向下偏移 100px）。
4. 绘制文字“SVG”。文字被填充为白色，通过设置居中的锚点把文字定位到期望的位置：在这种情况下，中心点应该对应于绿色圆圈的中点。还可以精细调整字体大小和垂直位置，确保最后的样式是美观的。
SVG 文件的基本属性
-----------

* 最值得注意的一点是元素的渲染顺序。SVG 文件全局有效的规则是“后来居上”，越后面的元素越可见。
* web 上的 SVG 文件可以直接在浏览器上展示，或者通过以下几种方法嵌入到 HTML 文件中：
    + 如果 HTML 是 XHTML 并且声明类型为 `application/xhtml+xml`，可以直接把 SVG 嵌入到 XML 源码中。
    + SVG 可以直接被嵌入到 HTML 中。
    + 可以使用 `img` 元素。
    + 可以通过 `object` 元素引用 SVG 文件：
     html
    ```html
    <object data="image.svg" type="image/svg+xml"></object>
    
    ```
    + 类似的也可以使用 `iframe` 元素引用 SVG 文件：
     html
    ```html
    <iframe src="image.svg"></iframe>
    
    ```
    + 最后，SVG 可以通过 JavaScript 动态创建并注入到 HTML DOM 中。
* SVG 如何处理大小和单位将在下一页详解。
SVG 文件类型
--------

SVG 文件有两种形式。普通 SVG 文件是包含 SVG 标记的简单文本文件。推荐使用“.svg”（全部小写）作为此类文件的扩展名。

由于在某些应用（比如地图应用等）中使用时，SVG 文件可能会很大，SVG 标准同样允许 gzip 压缩的 SVG 文件。推荐使用“.svgz”（全部小写）作为此类文件扩展名。不幸的是，如果服务器是微软的 IIS 服务器，使 gzip 压缩的 SVG 文件在所有的可用 SVG 的用户代理上可靠地起作用是相当困难的，而且 Firefox 不能在本地机器上加载 gzip 压缩的 SVG 文件。除非知道处理发布内容的 Web 服务器可以正确的处理 gzip，否则要避免使用 gzip 压缩的 SVG。

关于 web 服务器上 .svgz 文件的小提示
------------------------

如果你已经知道了如何创建基本 SVG 文件，下一步就是把它们上传到 web 服务器，但是在这阶段有一些陷阱。对于普通 SVG 文件，服务器应该会发送下面的 HTTP 头：


```http
Content-Type: image/svg+xml
Vary: Accept-Encoding
```


对于 gzip 压缩的 SVG 文件，服务器应该会发送下面的 HTTP 头：


```http
Content-Type: image/svg+xml
Content-Encoding: gzip
Vary: Accept-Encoding
```


你可以利用网络监控面板或者 websniffer.cc 之类的网站来检查服务器是否给 SVG 文件发送正确的 HTTP 标头。提交你的一个 SVG 文件的 URL，然后查看 HTTP 响应标头。如果发现服务器没有发送具有上述值的响应标头，那么你应该联系你的网站托管服务商。如果不能说服他们为 SVG 修正服务器配置，可能还有一些我们可以自行解决的办法。请阅读 w3.org 上的服务器配置页面以找到一些简单的解决方案。

服务器配置错误是 SVG 加载失败的常见原因，所以一定要确保你的服务器配置正确。如果不能把服务器配置成给 SVG 文件发送正确的响应标头，这时 Firefox 很有可能把该文件的标记显示成文本或乱码，甚至会要求查看者选择打开文件的应用程序。

* « 上一页
* 下一页 »
SVG 工具
======

* « 上一页
* 下一页 »

现在我们已经讲解了 SVG 内部的基础。我们将看一看哪些工具可以制作或呈现 SVG 文件。

Inkscape
--------

URL：www.inkscape.org

图形格式最重要的工具之一，是一个相当好的绘图程序。Inkscape 提供了最先进的矢量绘图功能，而且它是开源的。

此外它使用 SVG 作为它的原生文件格式。为了存储 Inkcape 特有的数据，它扩展了 SVG 文件，添加了自定义命名空间的元素和属性，但是你依然可以选择导出纯 SVG 文件。

Adobe Illustrator
-----------------

URL：www.adobe.com/products/illustrator/

在 Adobe 收购 Macromedia 之前，它已经是最著名的 SVG 的推动者。长期以来，Illustrator 对 SVG 支持得很好。然而，它输出的 SVG 经常显出一些怪癖，导致有必要为普适性而进行后续处理。

Apache Batik
------------

URL：xmlgraphics.apache.org/batik/

Batik 是 Apache 软件基金会支持下的一个开源工具集。这个工具包是用 Java 写的，提供了相当完整的 SVG 1.1 支持，而且还有很多源自于 SVG 1.2 计划的功能。

除了查看器（Squiggle）以及输出为 PNG 的光栅化输出，Batik 还提供了一个 SVG 完美打印机以格式化 SVG 文件，以及一个 TrueType 字体到 SVG 字体的转换器。

与 Apache FOP 联用，Batki 还可以把 SVG 转换成 PDF。

### 其他呈现器

要想从一个 SVG 源创建一个光栅图像，存在很多个项目。ImageMagick 是最著名的命名行图象处理工具之一。Wikipedia 所用到的 Gnome 库 rsvg 能把它们的 SVG 图形光栅化。

Snap.svg
--------

URL: snapsvg.io

这是一个来自与 Raphael JS 相同的作者的更新的 JavaScript 库，表现为浏览器编译器之间的一个抽像层。Snap.svg 专为现代浏览器设计，因此支持最新的 SVG 特性，如遮罩、裁剪、图案、全渐变、组。它不支持 Raphael 所支持的旧浏览器。

Google Docs
-----------

URL：www.google.com/google-d-s/drawings/

从 Google Docs 绘制，可以被输出为 SVG。

Science
-------

这两个名声很响的策划工具 xfig 和 gnuplot 都支持导出为 SVG。为了在 web 上呈现图像，JSXGraph 支持 VML、SVG 和 canvas，基于浏览器的功能，自动决定使用哪种技术。

在 GIS（地理图形信息系统）应用中，SVG 是常用的存储和呈现格式。请阅读 carto.net 以了解详情。

更多工具
----

W3C 提供了一个支持 SVG 的程序列表。

* « 上一页
* 下一页 »
坐标定位
====

* « 上一页
* 下一页 »
网格
--

对于所有元素，SVG 使用的坐标系统或者说网格系统，和 Canvas 用的差不多（所有计算机绘图都差不多）。这种坐标系统是：以页面的左上角为 (0,0) 坐标点，坐标以像素为单位，x 轴正方向是向右，y 轴正方向是向下。注意，这和你小时候所教的绘图方式是相反的。但是在 HTML 文档中，元素都是用这种方式定位的。

![](/zh-CN/docs/Web/SVG/Tutorial/Positions/canvas_default_grid.png)

### 示例

元素


```html
<rect x="0" y="0" width="100" height="100" />
```


定义一个矩形，即从左上角开始，向右延展 100px，向下延展 100px，形成一个 100\*100 大的矩形。

### 什么是 "像素"?

基本上，在 SVG 文档中的 1 个像素对应输出设备（比如显示屏）上的 1 个像素。但是这种情况是可以改变的，否则 SVG 的名字里也不至于会有“Scalable”（可缩放）这个词。如同 CSS 可以定义字体的绝对大小和相对大小，SVG 也可以定义绝对大小（比如使用“pt”或“cm”标识维度）同时 SVG 也能使用相对大小，只需给出数字，不标明单位，输出时就会采用用户的单位。

在没有进一步规范说明的情况下，1 个用户单位等同于 1 个屏幕单位。要明确改变这种设定，SVG 里有多种方法。我们从`svg`根元素开始：


```html
<svg width="100" height="100">…</svg>
```


上面的元素定义了一个 100\*100px 的 SVG 画布，这里 1 用户单位等同于 1 屏幕单位。


```html
<svg width="200" height="200" viewBox="0 0 100 100">…</svg>
```


这里定义的画布尺寸是 200\*200px。但是，viewBox 属性定义了画布上可以显示的区域：从 (0,0) 点开始，100 宽\*100 高的区域。这个 100\*100 的区域，会放到 200\*200 的画布上显示。于是就形成了放大两倍的效果。

用户单位和屏幕单位的映射关系被称为**用户坐标系统**。除了缩放之外，坐标系统还可以旋转、倾斜、翻转。默认的用户坐标系统 1 用户像素等于设备上的 1 像素（但是设备上可能会自己定义 1 像素到底是多大）。在定义了具体尺寸单位的 SVG 中，比如单位是“cm”或“in”，最终图形会以实际大小的 1 比 1 比例呈现。

下面是引自 SVG1.1 规范的一段说明：

> 
> […] 假设在用户的设备环境里，1px 等于 0.2822222 毫米（即分辨率是 90dpi），那么所有的 SVG 内容都会按照这种比例处理： […] "1cm" 等于 "35.43307px"（即 35.43307 用户单位）；
> 
> 
> 

* « 上一页
* 下一页 »