svg在html5中应用,svg text属性

　　前面已经介绍了很多基本元素，包括结构相关的组合和复用元素。在这里，我们将简要总结SVG的文档结构中剩余的相关元素，然后继续欣赏SVG的其他特性。

　　SVG文档的元素基本上可以分为以下几类：

　　动画元素：动画，动画颜色，动画运动，动画变换，设置；

　　解释性元素：desc、元数据、标题；

　　图形元素：圆、椭圆、直线、路径、多边形、折线、矩形；

　　元素：defs，g，SVG，symbol，use

　　渐变元素：线性渐变、径向渐变；

　　其他元素：a、altglyphdef、clippath、颜色配置文件、光标、滤镜、字体、字体、外来对象、图像、标记、遮罩、图案、脚本、样式、开关、文本、视图等。

　　其中引入了图形元素、渐变元素、文字、图像元素及其组合。以下是一些与结构相关的其他元素。视窗-svg元素

　　您可以在svg元素中以任何顺序放置任何其他元素，包括嵌套的svg元素。

　　svg元素支持的常用属性有id、class、x、y、width、height、viewbox、preserve aspect ratio以及填充和描边的相关属性。

　　svg元素支持的事件也常用onload、onmouseover、onmousemove、onmousedown、onmouseup、onclick、onfocusin、onfocusout、onresize、onscroll、onunload等。Svg元素就不用提了。有关属性和事件的完整列表，请参考后面的官方文档。解释性元素-desc元素与title元素

　　每个容器元素(可以包含其他容器元素或图形元素的元素，如：A、DEFs、Glyph、G、Marker、Mask、Missing-Glyph、Pattern、SVG、Switch和symbol)和图形元素可以包含desc和标题元素，它们是解释相关情况的辅助元素；它们的内容都是文本。当呈现SVG文档时，这两个元素不会被呈现到图形中。这两个元素没有太大区别。在一些实现中，title作为提示信息出现，所以通常title被放在父元素的第一个位置。

　　的典型用法如下：复制代码代码如下：

　　SVG xmlns=http://www . w3 . org/2000/SVG 版本=1.1 宽度= 4英寸高度= 3英寸

　　titleCompanysalesbyregion/title

　　表名

　　这是一幅展示

　　companysalesbyregion。

　　/desc

　　！-barchartdefinedsvectordata-

　　/svg

　　通常，最外层的svg元素应该附有标题描述，这样程序可读性更好。标记-marker元素

　　定义附加到一个或多个顶点(路径、直线、折线或多边形的顶点)的图形元素(箭头和多点标记)。可以通过在路径、直线或折线的起点或终点附加标记来制作箭头。多点标记可以将标记附加到路径、直线、折线或多边形的所有顶点。

　　标记由标记元素定义，然后可以在路径、直线、折线或多边形中设置相关属性(标记、标记起点、标记中点和标记终点)。举个例子：复制代码如下：

　　SVG width= 4英寸高度= 2英寸

　　viewBox=0040002000 版本=1.1

　　xmlns= http://www . w3 . org/2000/SVG

　　面数

　　markerid=三角形

　　view box= 001010 refX= 0 refY= 5

　　markerUnits=strokeWidth

　　markerWidth=4markerHeight=3

　　orient=auto

　　pathd=M00L105L010z/

　　/标记

　　/defs

　　desplacinganarrowheadattheendofapath。

　　/desc

　　pathd= m 1000750 l 2000750 l 25001250

　　fill=nonestroke=黑色 stroke-width=100

　　marker-end=url(#Triangle)/

　　/svg下面详细看看marker的相关知识:

　　1.marker是一个容器元素，可以存储图形元素、容器元素、动画、渐变元素等。以任何顺序。

　　2.marker元素可以创建一个新窗口：设置viewBox的值。

　　3 .标记更重要的属性：

　　marker units= stroke width userSpaceOnUse

　　此属性定义属性markerWidth、markerHeight和marker的内容所使用的坐标系。该属性有两个可选值。第一个值strokeWidth是默认值。表示属性markerWidth、markerHeight和marker的内容使用的坐标系单位等于引用此标记的图形元素的笔画宽度设置的值。

　　例如，在上面的例子中，标记元素的宽度是400，高度是300，但是不要混淆。标记元素中路径使用的坐标是viewBox设置的新用户坐标系。

　　该属性的另一个值userSpaceOnUse表示属性markerWidth、markerHeight和marker的内容使用引用该标记的图形元素的坐标系。

　　x，refy:定义与标记对齐的参考点的位置坐标。例如，在上面的示例中，参考点是终点，它应该与标记的(0，5)位置对齐。请注意，refX，refY使用由viewBox转换的最终用户坐标系。

　　标记宽度，标记高度：标记窗口的宽度和高度，很好理解。

　　方向：定义标记旋转的角度。您可以指定角度或直接指定自动。auto代表x轴正方向按照下列规则旋转:

　　A.如果标记所在的点只属于一条路径，则标记的x轴的正方向与路径方向相同。见上例。

　　B.如果标记所在的点属于两条不同的路径，则标记的X轴的正方向与两条路径的夹角的角平分线一致。

　　4.图形元素的标记属性

　　图形元素要引用一个标记，需要使用相关的属性，主要是这三个：marker-start(将引用的标记放在起点)，marker-mid(将引用的标记放在除起点和终点以外的所有点)，marker-end(将引用的标记放在终点)。这三个属性的值可以是none(表示不引用标记)、marker reference(引用标记)和inherit(不用说)。

　　你也可以从上面的例子中看到marker的用法。脚本与样式-script元素与style元素

　　实际上，基本上所有属性(针对所有元素，而不仅仅是文本)都可以用CSS与一个元素相关联，所有CSS属性在SVG图像中都是可用的。可以直接用样式属性设计元素的样式，也可以参考样式表来设计元素的样式。对于XML文件，样式表不应该被解析(因为它们偶尔会包含引起问题的字符)，所以需要放在XMLCDATA节中。脚本也是如此，需要放在XMLCDATA节中。看下面这个CSS例子：复制代码代码如下：

　　SVG width= 400 height= 200 xmlns= http://www . w3 . org/2000/SVG

　　描述文本/描述定义

　　styletype=text/css

　　！[CDATA[。缩写{text-decoration:下划线；}

　　]]

　　/风格

　　/defs

　　textx= 20 y= 50 font-size= 30 colorscan specified/text

　　textx= 20 y= 100 font-size= 30 by they

　　tspanfill=rgb(255，0，0)class=abbreviationR/tspan

　　tspanfill=rgb(0，255，0)class=缩写 G/tspan

　　tspanfill=rgb(0，0，255 class= abbreviation b/tspan values/text

　　textx= 20 y= 150 font-size= 30 orbykeywords例如/text

　　textx=20y=200

　　tspan style= fill:lightsteelblue；font-size:30 lightsteelblue/t span，

　　/文本

　　/svg

　　再次查看脚本示例：复制代码代码如下：

　　SVG width= 500 height= 300 xmlns= http://www . w3 . org/2000/SVG

　　描述theonclickevent/desc

　　面数

　　scripttype=text/ecmascript

　　！[CDATA[

　　函数隐藏显示(evt){

　　varimageTarget=evt.target

　　vartheFill=image target . get attribute( fill )；

　　if(theFill==white )

　　imageTarget.setAttribute(fill ， URL(# notes))；

　　其他

　　imageTarget.setAttribute(fill ， white )；

　　}

　　]]

　　/脚本

　　pattern id= notes x= 0 y= 0 width= 50 height= 75

　　patternTransform=rotate(15)

　　patternUnits=用户空间使用

　　ellipsecx= 10 cy= 30 rx= 10 ry= 5 /

　　linex1=20y1=30x2=20y2=0

　　stroke-width= 3 stroke= black /

　　linex1=20y1=0x2=30y2=5

　　stroke-width= 3 stroke= black /

　　/模式

　　/defs

　　ellipseonclick= hide reveal(evt) CX= 175 cy= 100 rx= 125 ry= 60

　　fill= URL(# notes) stroke= black stroke-width= 5 /

　　/svg条件处理-switch元素

　　处理属性是可以控制元素是否呈现的属性。基本上，大多数元素(尤其是图形元素)都可以指定条件处理属性。有三个条件处理属性：必需的特性、必需的扩展和系统语言。这些属性是一组测试，所有这些测试都允许您指定一个值列表(前两个属性用空格分隔，语言属性用逗号分隔)。默认值都为真。

　　SVG的switch元素提供了根据指定条件进行渲染的能力。switch元素是一个容器元素，可以包含图形元素、说明元素、动画元素、a、外物、g、image、SVG、switch、text、use等元素。switch元素会依次检查直接子元素的条件处理属性，然后渲染第一个满足自身条件的子元素，其他子元素会被忽略。这些属性和display属性一样，只影响直接使用这些属性的元素的呈现，不会影响引用的元素(比如use引用的元素)。简单来说，这三个属性会影响A，Alt Glyph，Foreign Object，TextPath，Tref，TSPAN，Animate，Animate Color，Animate Motion，Animate Transform，Set等元素，不会影响Defs，Cursor，Mask，ClipPath，Pattern等元素(这些元素要么不可渲染，要么引用其他元素)。注意:子元素的display和visibility属性的值不影响switch元素的条件判断结果。

　　有关条件处理属性的值列表，请参见官方文档。下面举个小例子：复制代码如下：

　　转换

　　rectrequiredFeatures= http://www . w3 . org/TR/SVG 11/feature # Filter

　　x=10y=10 宽度=322 高度=502 不透明度=0.6

　　fill= black stroke= none filter= URL(# gblurshadow)/

　　rectx= 10 y= 10 width= 322 height= 502 opacity= 0.6

　　fill=blackstroke=none/

　　/开关

　　这个例子的意思很简单：如果你用的浏览器支持滤镜功能，就画上面的矩形(带滤镜功能)，如果不支持滤镜功能就画下面的矩形。

　　其实更多时候，用的比较多的属性是systemLanguage，是文本的多语言处理能力。例如，复制代码如下：

　　SVG xmlns= http://www . w3 . org/2000/SVG 版本=1.1 宽度= 5厘米高度= 5厘米

　　转换

　　textx= 10 y= 20 system language= de de-哈哈/text

　　textx= 10 y= 20 system language= en en-haha/text

　　/开关

　　/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/

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。

相关文章阅读