html中svg定义的图形是什么格式,svg在html5中应用

　　html中svg定义的图形是什么格式,svg在html5中应用

　　SVG中渲染文本

　　SVG的强大功能之一是，它可以在标准HTML页面无法控制的范围内控制文本，而无需借助图像或其他插件。任何可以在形状或路径上执行的操作(如绘图或过滤)都可以在文本上执行。虽然SVG的文本渲染如此强大，但还是有一个缺点：SVG不能进行文字换行。如果文本长度超过了允许的空间，只需将其截断即可。在大多数情况下，创建多行文本需要多个文本元素。

　　此外，tspan元素可以用来将文本元素分成几个部分，允许每个部分都有自己的样式。

　　还有，在text元素中，空格的处理类似于HTML:换行符和回车变成空格，而多个空格被压缩成一个空格。

　　直接显示在图片中的文本 - text元素文本可以直接显示，可以使用text元素。示例如下：代码如下：

　　挽救（saving的简写）

　　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

　　如上例所示，文本元素可以设置以下属性：

　　x，y是文本位置坐标。Text-anchor是文本显示的方向，实际上是指位置(x，y)在文本的位置。该属性有三个值：开始、中间和结束。指示起始文本位置的坐标(x，y)位于文本的开头，文本从该点开始一个接一个地向右显示。中间的意思是(x，y)位于文字的中间，文字左右方向显示，实际上是居中显示。End (x，y)点位于文本的末尾，文本一个接一个地显示在左侧。除了这些属性之外，还可以在CSS中或直接在属性中指定下列属性：

　　填充、描边：填充和描边颜色，具体用法稍后总结。字体的相关属性：字体系列、字体样式、字体粗细、字体变体、字体拉伸、字体大小、字体大小调整、内核、字母间距、单词间距和文本修饰。文本区间 - tspan元素这个元素是对文本元素的有力补充；它用于呈现间隔中的文本；它只能出现在tspan元素的text元素或子元素中。典型的用法是强调显示部分文本。例如，如下：

　　文本

　　t span font-weight= bold fill= red 这是粗体和红色/tspan

　　/text

　　tspan元素有以下可以设置的属性：x和y用于设置所包含文本的绝对坐标值，它将覆盖默认的文本位置。这些属性可以包含一系列数字，应用于每个相应的单个字符。没有相应设置的字符将紧跟在前一个字符之后。例如，如下：

　　text x=10 y=10Hello World！

　　t span x= 100 200 300 font-weight= bold fill= red 这是粗体和红色/tspan

　　/text

　　Dx，dy用于设置所包含文本相对于默认文本位置的偏移量。这些属性还可以包含一系列数字，每个数字都应用于相应的字符。没有相应设置的字符将紧跟在前一个字符之后。可以把上面例子中的X改成dx看看效果。旋转用于设置字体的旋转角度。该属性页可以包含应用于每个字符的一系列数字。没有相应设置的字符将使用最后设置的号码。如下：

　　text x=10 y=10Hello World！

　　t span rotate= 10 20 45 font-weight= bold fill= red 这是粗体和红色/tspan

　　/text

　　TextLength:这是最令人费解的属性。据说设置后，渲染发现文字长度与该值不一致时，以该长度为准。但是我没有尝试过。文本引用 - tref元素该元素允许引用已定义的文本，并将其有效地复制到当前位置，通常使用xlink:href来指定目标元素。因为是复制的，所以当css修改当前文本时，不会修改原文。请看示例：复制如下代码：

　　text id=example 这是一个示例文本。/文本

　　文本

　　tref xlink:href=#example /

　　/text文本路径 - textPath元素这个比较有意思，效果也很爽。可以做出很多艺术效果；该元素从其xlink:href属性中获取指定的路径，并将文本与该路径对齐。请看示例：复制如下代码：

　　path id=my_path d=M 20，20 C 40，40 80，40 100，20 /

　　文本

　　textPath xlink:href=#my_path 此文本遵循曲线。/textPath

　　/textSVG中渲染图片 - image元素SVG中的image元素可以直接支持光栅图像的显示，简单易用。看下面这个例子：代码如下：

　　svg宽度= 5厘米高度= 4厘米

　　image xlink:href= penguides . jpg x= 0 y= 0 height= 50px width= 50px /

　　/svg这里需要注意几点:

　　1.如果未设置x或y坐标，则默认值为0。

　　2.如果未设置宽度或高度，默认值也是0。

　　3.如果宽度或高度显式设置为0，将禁止呈现此图片。

　　4.图片格式支持png、jpeg、jpg、svg等。所以svg支持嵌套svg。

　　5.image和其他元素一样，是svg的常规元素，所以支持所有的裁剪、蒙版、滤镜、旋转等效果。

　　实用参考：

　　脚本索引：http://msdn.microsoft.com/zh-cn/library/ff971910(v=vs . 85)。文件

　　开发中心：https://developer.mozilla.org/en/SVG

　　大众参考：http://www.chinasvg.com/

　　官方文件：http://www.w3.org/TR/SVG11/