摘要：
svg与canvas一样都可以将文本和图像放在画布中，制作出不一样的效果。下面是如何使用svg来渲染文本与图像。
简介：
SVG的强大能力之一是它可以将文本控制到标准HTML页面不可能有的程度，而无须求助图像或其它插件。任何可以在形状或路径上执行的操作（如绘制或滤镜）都可以在文本上执行。尽管SVG的文本渲染如此强大，但是还是有一个不足之处：SVG不能执行自动换行。如果文本比允许空间长，则简单地将它切断。多数情况下，创建多行文本需要多个文本元素。
文本：
文本主要使用text元素，在text元素中，空格的处理与HTML类似：换行和回车变成空格，而多个空格压缩成单个空格。
<svg width="500" height="500" version="1.1" xmlns="http://www.w3.org/2000/svg">
<rect width="300" height="100" style="fill:red;"/>
<circle cx="150" cy="100" r="80" style="fill:green;"/>
<text x="100" y="125" font-size="60" style="fill:white">SVG</text>
</svg>
效果
注意：从图上也可以看出，svg中的元素是按照从上往下开始执行的，后者会覆盖前者，可以使用透明来处理。
参数详解：
- x,y是文本开始坐标。
- text-anchor是文本显示的方向，其实也就是位置(x,y)处于文本的位置。这个属性有start,middle和end三种值。start表示文本位置坐标(x,y)位于文本的开始处，文本从这点开始向右挨个显示。middle表示(x,y)位于文本中间处，文本向左右两个方向显示，其实就是居中显示。end表示(x,y)点位于文本结尾，文本向左挨个显示。
- fill,stroke：填充和描边颜色，建议类似与样式有关的写在style属性中，比如fill，font等。
使用tspan来强调重点：
这个元素是text元素的强力补充；它用于渲染一个区间内的文本；它只能出现在text元素或者tspan元素的子元素中。典型的用法就是强调显示部分文本。例如：
<svg width="500" height="500" version="1.1" xmlns="http://www.w3.org/2000/svg">
<text x="100" y="125" font-size="60" style="fill:green">
<tspan font-weight="bold">测试</tspan>
<tspan font-weight="bold" fill="red">svg</tspan>
</text>
</svg>
效果：
配置参数：
- x,y用于设置包含的文本的绝对坐标值，这个值会覆盖默认的文本位置。这些属性可以包含一系列数字，这些数字会应用到每个对应的单个字符。没有对应设置的字符会紧跟前一个字符。
- dx,dy用于设置包含的文本相对于默认的文本位置的偏移量。这些属性同样可以包含一系列数字，每个都会应用到对应的字符。没有对应设置的字符会紧跟前一个字符。
- rotate用于设置字体的旋转角度
图像：
SVG中的image元素可以直接插入图片，如下：
<svg width="500" height="500" version="1.1" xmlns="http://www.w3.org/2000/svg">
<image xlink:href="qq.png" x="10" y="10" height="50px" width="50px">
</svg>
效果：
注意：
- 如果没有设置x或y坐标，则默认是0
- 如果显式的设置width或height为0，则会禁止渲染这幅图片。
- 如果没有设置width或height，则默认也是0
- 图片的格式支持png,jpeg,jpg,svg等等，所以svg是支持嵌套svg的。
附录：
SVG 元素：
| 元素 | 描述 |
|---|---|
| a | 定义超链接 |
| altGlyph | 允许对象性文字进行控制，来呈现特殊的字符数据（例如，音乐符号或亚洲的文字） |
| altGlyphDef | 定义一系列象性符号的替换（例如，音乐符号或者亚洲文字） |
| altGlyphItem | 定义一系列候选的象性符号的替换 |
| animate | 随时间动态改变属性 |
| animateColor | 规定随时间进行的颜色转换 |
| animateMotion | 使元素沿着动作路径移动 |
| animateTransform | 对元素进行动态的属性转换 |
| circle | 定义圆 |
| clipPath | |
| color-profile | 规定颜色配置描述 |
| cursor | 定义独立于平台的光标 |
| definition-src | 定义单独的字体定义源 |
| defs | 被引用元素的容器 |
| desc | 对 SVG 中的元素的纯文本描述 - 并不作为图形的一部分来显示。用户代理会将其显示为工具提示。 |
| ellipse | 定义椭圆 |
| feBlend | SVG 滤镜。使用不同的混合模式把两个对象合成在一起。 |
| feColorMatrix | SVG 滤镜。应用matrix转换。 |
| feComponentTransfer | SVG 滤镜。执行数据的 component-wise 重映射。 |
| feComposite | SVG 滤镜。 |
| feConvolveMatrix | SVG 滤镜。 |
| feDiffuseLighting | SVG 滤镜。 |
| feDisplacementMap | SVG 滤镜。 |
| feDistantLight | SVG 滤镜。 Defines a light source |
| feFlood | SVG 滤镜。 |
| feFuncA | SVG 滤镜。feComponentTransfer 的子元素。 |
| feFuncB | SVG 滤镜。feComponentTransfer 的子元素。 |
| feFuncG | SVG 滤镜。feComponentTransfer 的子元素。 |
| feFuncR | SVG 滤镜。feComponentTransfer 的子元素。 |
| feGaussianBlur | SVG 滤镜。对图像执行高斯模糊。 |
| feImage | SVG 滤镜。 |
| feMerge | SVG 滤镜。创建累积而上的图像。 |
| feMergeNode | SVG 滤镜。feMerge的子元素。 |
| feMorphology | SVG 滤镜。 对源图形执行"fattening" 或者 "thinning"。 |
| feOffset | SVG 滤镜。相对与图形的当前位置来移动图像。 |
| fePointLight | SVG 滤镜。 |
| feSpecularLighting | SVG 滤镜。 |
| feSpotLight | SVG 滤镜。 |
| feTile | SVG 滤镜。 |
| feTurbulence | SVG 滤镜。 |
| filter | 滤镜效果的容器。 |
| font | 定义字体。 |
| font-face | 描述某字体的特点。 |
| font-face-format | |
| font-face-name | |
| font-face-src | |
| font-face-uri | |
| foreignObject | |
| g | 用于把相关元素进行组合的容器元素。 |
| glyph | 为给定的象形符号定义图形。 |
| glyphRef | 定义要使用的可能的象形符号。 |
| hkern | |
| image | |
| line | 定义线条。 |
| linearGradient | 定义线性渐变。 |
| marker | |
| mask | |
| metadata | 规定元数据。 |
| missing-glyph | |
| mpath | |
| path | 定义路径。 |
| pattern | |
| polygon | 定义由一系列连接的直线组成的封闭形状。 |
| polyline | 定义一系列连接的直线。 |
| radialGradient | 定义放射形的渐变。 |
| rect | 定义矩形。 |
| script | 脚本容器。（例如ECMAScript） |
| set | 为指定持续时间的属性设置值 |
| stop | |
| style | 可使样式表直接嵌入SVG内容内部。 |
| svg | 定义SVG文档片断。 |
| switch | |
| symbol | |
| text | |
| textPath | |
| title | 对 SVG 中的元素的纯文本描述 - 并不作为图形的一部分来显示。用户代理会将其显示为工具提示。 |
| tref | |
| tspan | |
| use | |
| view | |
| vkern |
来源：https://www.cnblogs.com/smedas/p/12518968.html