今天小编跟大家讲解下有关HTML5之SVG 2D入门3―文本与图像及渲染文本介绍 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关HTML5之SVG 2D入门3―文本与图像及渲染文本介绍 的相关资料，希望小伙伴们看了有所帮助。
SVG中渲染文本
SVG的强大能力之一是它可以将文本控制到标准HTML页面不可能有的程度 而无须求助图像或其它插件。任何可以在形状或路径上执行的操作（如绘制或滤镜）都可以在文本上执行。尽管SVG的文本渲染如此强大 但是还是有一个不足之处：SVG不能执行自动换行。如果文本比允许空间长 则简单地将它切断。多数情况下 创建多行文本需要多个文本元素。此外 可以使用 tspan 元素可以将文本元素分成几部分 允许每部分有各自的样式。
还有 在text元素中 空格的处理与HTML类似：换行和回车变成空格 而多个空格压缩成单个空格。
直接显示在图片中的文本 - text元素直接显示文本 可以使用text元素 例子如下：复制代码代码如下:<svg> <rect width="300"height="200"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>如上面的例子中所示 text元素可以设置下列的属性：
x,y是文本位置坐标。text-anchor是文本显示的方向 其实也就是位置(x,y)处于文本的位置。这个属性有start,middle和end三种值。start表示文本位置坐标(x,y)位于文本的开始处 文本从这点开始向右挨个显示。middle表示(x,y)位于文本中间处 文本向左右两个方向显示 其实就是居中显示。end表示(x,y)点位于文本结尾 文本向左挨个显示。除了这些属性 下面的这些属性都既可以在CSS中指定 也可以直接在属性中指定:
fill,stroke：填充和描边颜色 具体使用在后面总结。font的相关属性：font-family, font-style, font-weight, font-variant, font-stretch, font-size, font-size-adjust, kerning, letter-spacing, word-spacing and text-decoration。 文本区间 - tspan元素这个元素是text元素的强力补充；它用于渲染一个区间内的文本；它只能出现在text元素或者tspan元素的子元素中。典型的用法就是强调显示部分文本。例如：复制代码代码如下:<text> <tspan font-weight="bold"fill="red">This is bold and red</tspan></text>tspan元素有下列的属性可以设置：x,y用于设置包含的文本的绝对坐标值 这个值会覆盖默认的文本位置。这些属性可以包含一系列数字 这些数字会应用到每个对应的单个字符。没有对应设置的字符会紧跟前一个字符。例如： 复制代码代码如下:<text x="10"y="10">Hello World! <tspan x="100 200 300"font-weight="bold"fill="red">This is bold and red</tspan></text>dx,dy用于设置包含的文本相对于默认的文本位置的偏移量。这些属性同样可以包含一系列数字 每个都会应用到对应的字符。没有对应设置的字符会紧跟前一个字符。你可以把上面的例子中的x换成dx看看效果。rotate用于设置字体的旋转角度。这个属性页可以包含一系列数字 应用到每个字符。没有对应设置的字符会使用最后设置的那个数字。复制代码代码如下:<text x="10"y="10">Hello World! <tspan rotate="10 20 45"font-weight="bold"fill="red">This is bold and red</tspan></text>textLength：这是最令人费解的属性 据说设置完以后 渲染发现文本的长度与这个值不一致时 会以这个长度为准。但是我没有试出来效果。文本引用 - tref元素这个元素允许引用定义过的文本 并高效的拷贝到当前位置 通常配合xlink:href指定目的元素。因为是拷贝过来的 所以使用css修改当前文本的时候 不会修改原来的文本。看例子：复制代码代码如下:<text id="example">This is an example text.</text><text> <tref xlink:href=""/></text>文本路径 - textPath元素这个比较有意思 效果也很酷 能做出很多的艺术效果；这个元素从它的xlink:href属性获取指定的路径并把文本对齐到这个路径上 看例子：复制代码代码如下:<path id="my_path"d="M 20,20 C 40,40 80,40 100,20"/><text> <textPath xlink:href="">This text follows a curve.</textPath></text>SVG中渲染图片 - image元素SVG中的image元素可以直接支持显示光栅图片 使用很简单。看下面的例子：复制代码代码如下:<svg width="5cm"height="4cm"> <image xlink:href="https://www.aidi.net.cn//html5/Penguins.jpg"x="0"y="0"height="50px"width="50px"/></svg>这里需要注意几点：1.如果没有设置x或y坐标 则默认是0。
2.如果没有设置width或height 则默认也是0.
3.如果显式的设置width或height为0 则会禁止渲染这幅图片。
4.图片的格式支持png,jpeg,jpg,svg等等 所以svg是支持嵌套svg的。
5.image与其他元素一样 是svg的常规元素 所以它支持所有的裁剪 蒙板 滤镜 旋转等效果。
实用参考：脚本索引：http://msdn.microsoft.com/zh-cn/library/ff971910(v=vs.85).aspx开发中心：https://developer.mozilla.org/en/SVG热门参考：http://www.chinasvg.com/官方文档：http://www.w3.org/TR/SVG11/
来源：爱蒂网
