摘要：

　　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 元素：