HTML5之SVG 2D入门8 - 文档结构

转载 2016年08月30日 18:20:26

前面介绍了很多的基本元素,包括结构相关的组合和重用元素,这里先对SVG的文档结构中剩下的相关元素简单总结一下,然后继续向前领略SVG的其他特性。

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

•动画元素:animate, animateColor, animateMotion, animateTransform, set;
•解释元素:desc, metadata, title;
•图形元素:circle, ellipse, line, path, polygon, polyline, rect;
•结构元素:defs, g, svg, symbol, use;
•渐变元素:linearGradient, radialGradient;
•其他元素:a,altGlyphDef,clipPath,color-profile,cursor,filter,font,font-face,foreignObject,image,marker,mask,pattern,script,style,switch,text,view等。

其中图形元素,渐变元素,文本,图像元素和组合等都介绍过了,下面介绍另外几个与结构相关的元素。

视窗 - svg元素

可以在svg元素中以任何顺序放置任何的其他元素,包括嵌套svg元素。
svg元素支持的属性常用的也就是id,class,x,y,width,height,viewBox,preserveAspectRatio,以及fill和stroke的相关属性。
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和title元素,这两个元素都是辅助性的元素,用于解释相关情境;它们的内容都是文本。当SVG文档被渲染的时候,这2个元素不会被渲染到图形中。这个2个元素之间差别不是太大,title在有些实现中是作为提示信息出现的,所以通常title是放到父元素的第一个位置上。
典型的用法如下:

<svg xmlns="http://www.w3.org/2000/svg"
     version="1.1" width="4in" height="3in">
  <g>
    <title>Company sales by region</title>
    <desc>
      This is a bar chart which shows 
      company sales by region.
    </desc>
    <!-- Bar chart defined as vector data -->
  </g>
</svg>

通常,最外层的svg元素要配以title说明,这样程序可读性更好。

标记 - marker元素
标记定义了附加到一个或者多个顶点(path,line,polyline或者polygon的顶点)上的图形元素(箭头和多点标记)。箭头可以通过把一个标记附加到path,line或者polyline的起点或者终点上。多点标记可以把一个标记附加到path,line,polyline或者polygon的所有顶点上。
标记是由marker元素定义的,然后在path,line,polyline或者polygon中设置相关的属性(marker,marker-start,marker-mid,和marker-end)就可以了。看个例子:

<svg width="4in" height="2in" 
     viewBox="0 0 4000 2000" version="1.1"
     xmlns="http://www.w3.org/2000/svg">
  <defs>
    <marker id="Triangle"
      viewBox="0 0 10 10" refX="0" refY="5" 
      markerUnits="strokeWidth"
      markerWidth="4" markerHeight="3"
      orient="auto">
      <path d="M 0 0 L 10 5 L 0 10 z" />
    </marker>
  </defs>
  <desc>Placing an arrowhead at the end of a path.
  </desc>
  <path d="M 1000 750 L 2000 750 L 2500 1250"
        fill="none" stroke="black" stroke-width="100" 
        marker-end="url(#Triangle)"  />
</svg>

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

  1. marker是容器元素,可以存放任意顺序的图形元素,容器元素,动画,渐变元素等。
  2. marker元素可以创建新的视窗:设置viewBox的值。
  3. marker比较重要的属性:
    markerUnits = “strokeWidth | userSpaceOnUse”
    这个属性定义了属性markerWidth,markerHeight和marker的内容使用的坐标系统。这个属性有2个值可选,第一个值strokeWidth是默认值,代表属性markerWidth,markerHeight和marker的内容使用的坐标系统的单位等于引用该marker的图形元素的stroke-width设置的值。
    例如上面的例子中,marker元素的width是400,height是300,不过千万不要混淆了,mark元素中的path使用的坐标是viewBox设置的新的用户坐标系。
    该属性另外一个取值userSpaceOnUse,代表属性markerWidth,markerHeight和marker的内容使用引用该marker的图形元素的坐标系统。
    refX,refY:定义了引用的点与marker对齐的位置坐标。例如上面的例子中,引用的点是终点,要把它对齐到marker的(0,5)位置。注意refX,refY使用的是经过viewBox变换过的最终用户坐标系。
    markerWidth,markerHeight:marker视窗的宽和高,这个很好理解。
    orient:定义了marker旋转的角度。可以指定一个角度或者直接赋值auto。
    auto代表x轴正方向按照下列规则旋转:
    a. 如果marker所在的点只属于一个path,则marker的x轴正向与path走向相同。参看上面例子。
    b. 如果marker所在的点属于两个不同的path,则marker的x轴正向与两个path的夹角的角等分线走向一致。
  4. 图形元素的marker属性
    图形元素要引用一个marker则需要使用相关的属性,主要是这3个:marker-start(把引用的marker放到起点), marker-mid(把引用的marker放到除起点和终点外的所有点), marker-end(把引用的marker放到终点)。这3个属性的取值可能是none(代表不引用marker),marker的引用(引用某marker),inherit(这个不用多说了)。
    从上面的例子中也可以看到marker的用法。

脚本与样式 - script元素与style元素

实际上,基本上所有的属性(对于所有元素,不仅是文本)都可以用CSS与一个元素关联,并且所有CSS属性都在SVG图像中可用。可以直接用样式属性设计元素的样式,或者引用样式表设计元素的样式。对XML文件来说不应该解析样式表(因为它们偶尔包含会引起问题的字符),因此需要将它们置于XML CDATA节。脚本也是同样的道理,需要放到XML CDATA节中。看下面的CSS例子:

<svg width="400" height="200" xmlns="http://www.w3.org/2000/svg">   
  <desc>Text</desc> <defs>   
    <style type="text/css">      
      <![CDATA[              .abbreviation { text-decoration: underline; }            ]]>                     
    </style> 
  </defs>   
  <g>      
    <text x="20" y="50" font-size="30">Colors can be specified</text>     
    <text x="20" y="100" font-size="30">by their        
      <tspan fill="rgb(255,0,0)" class="abbreviation">R</tspan>        
      <tspan fill="rgb(0,255,0)" class="abbreviation">G</tspan>        
      <tspan fill="rgb(0,0,255)" class="abbreviation">B</tspan>     values</text>     
    <text x="20" y="150" font-size="30">or by keywords such as</text>     
    <text x="20" y="200">        
       <tspan style="fill: lightsteelblue; font-size:30">lightsteelblue</tspan>,     
    </text>
  </g>
</svg>

再看脚本的例子:

<svg width="500" height="300" xmlns="http://www.w3.org/2000/svg">
 <desc>Scripting the onclick event</desc>
 <defs>
    <script type="text/ecmascript"> 
    <![CDATA[
      function hideReveal(evt) {
        var imageTarget = evt.target;
        var theFill = imageTarget.getAttribute("fill");
        if (theFill == 'white')
          imageTarget.setAttribute("fill", "url(#notes)");
        else
          imageTarget.setAttribute("fill", "white");
      }
    ]]> 
    </script>  
    <pattern id="notes" x="0" y="0" width="50" height="75" 
                   patternTransform="rotate(15)" 
                   patternUnits="userSpaceOnUse">
         <ellipse cx="10" cy="30" rx="10" ry="5"/>
         <line x1="20" y1="30" x2="20" y2="0" 
                   stroke-width="3" stroke="black"/>
         <line x1="20" y1="0" x2="30" y2="5" 
                   stroke-width="3" stroke="black"/>
     </pattern>
   </defs>
 <ellipse onclick="hideReveal(evt)" cx="175" cy="100" rx="125" ry="60"
           fill="url(#notes)" stroke="black" stroke-width="5"/>
</svg>

条件处理 - switch元素
条件处理属性是能控制所在元素渲染与否的属性。基本上大多数的元素(特别是图形元素)都可以指定条件处理属性。条件处理属性有3个:requiredFeatures, requiredExtensions和systemLanguage。这些属性就是一组测试,都允许指定一个值列表(前面两个属性是空格隔开的,语言这个属性是使用逗号隔开的),默认值都为true。
SVG的switch元素提供了按指定条件渲染的能力。switch元素是一个容器元素,可以包含图形元素,解释性元素,动画元素,a, foreignObject,g,image,svg,switch,text,use等元素。switch元素会按顺序检查直接子元素的条件处理属性,然后渲染满足自身条件的的第一个子元素,其他的子元素都会被忽略。这些属性与display属性一样,只会影响直接使用这些属性的元素的渲染,不会影响引用的元素(比如use引用的元素)。简单的说,这3个属性会影响a, altGlyph, foreignObject, textPath, tref, tspan ,animate, animateColor, animateMotion, animateTransform, set等元素,不会影响defs,cursor, mask, clipPath, pattern等元素(这些元素那么不是可渲染的,要么就是引用别的元素)。
注意:子元素的display和visibility属性值并不影响switch元素条件判断的结果。
条件处理属性的取值列表参看官方文档,这里就看一个小例子:

<switch> 
    <rect   requiredFeatures= "http://www.w3.org/TR/SVG11/feature#Filter "   
         x= "10 "   y= "10 "   width= "322 "   height= "502 "   opacity= "0.6 " 
         fill= "black "   stroke= "none "   filter= "url(#gblurshadow) "   /> 
    <rect   x= "10 "   y= "10 "   width= "322 "   height= "502 "   opacity= "0.6 " 
            fill= "black "   stroke= "none "   /> 
</switch>

这个例子的意思简单的说就是:使用的浏览器支持filter特性,那么就绘制上面的矩形(带filter属性),如果不支持filter特性,就绘制下面的矩形。
其实更多的时候,用的比较多的属性是systemLanguage,就是文本的多语言处理能力。例如:

<svg xmlns="http://www.w3.org/2000/svg"
     version="1.1" width="5cm" height="5cm">
  <switch> 
    <text x='10' y='20' systemLanguage="de">de - HAHA</text> 
    <text x='10' y='20' systemLanguage="en">en - haha</text> 
  </switch> 
</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/

转自:http://www.cnblogs.com/dxy1982/archive/2012/05/18/2456900.html

相关文章推荐

让canvas 支持事件

了解canvas这个标签后,会发现在一个canvas类似一个img图片,在canvas中绘制的图形都是一个整体,所有的事件也都是发生在这一个标签上,没有办法直接判断事件是发生在canvas中的某个图形...
  • zha_zi
  • zha_zi
  • 2014年12月02日 12:10
  • 770

SVG 入门 及 嵌入HTML的7种方式

SVG简介SVG 意为可缩放矢量图形(Scalable Vector Graphics)。 SVG 使用 XML 格式定义图像。SVG与其他图像格式相比,SVG的优势在于 SVG 可被非常多的工具读...

HTML5之SVG 2D入门8—文档结构及相关元素总结

前面介绍了很多的基本元素,包括结构相关的组合和重用元素,这里主要是对SVG的文档结构中剩下的相关元素简单总结一下,感兴趣的朋友可不要错过哦,然后继续向前领略SVG的其他特性。 前面介绍了很多的基本元...

HTML5之SVG 2D入门9—蒙板及mask元素介绍与应用

SVG支持多种蒙板特效,使用这些特性,我们可以做出很多很炫的效果,喜欢特效的朋友可不要错过哦。至于中文中把mask叫做"蒙板"还是"遮罩"就不去区分了,这里都叫做蒙板吧,希望本文对你有所帮助。 ...

HTML5之SVG 2D入门11 - 动画

交互性 SVG拥有良好的用户交互性,例如: SVG能响应大部分的DOM2事件。 SVG能通过cursor良好的捕捉用户鼠标的移动。 用户可以很方便的通过设置svg元素的zoomAndPan属性的值...

HTML5之SVG 2D入门6 - 坐标与变换

坐标系统   SVG存在两套坐标系统:视窗坐标系与用户坐标系。默认情况下,用户坐标系与视窗坐标系的点是一一对应的,都为原点在视窗的左上角,x轴水平向右,y轴竖直向下;如下图所示: SVG的视窗位置...

HTML5之SVG 2D入门11—用户交互性(动画)介绍及应用

SVG拥有良好的用户交互性:SVG能响应大部分的DOM2事件,SVG能通过cursor良好的捕捉用户鼠标的移动等等,感兴趣的朋友可以了解下啊,或许本文对你学习动画有所帮助。 交互性  SVG拥有良...

HTML5之SVG 2D入门10—滤镜的定义及使用

滤镜称得上是SVG最强大的功能了,它允许你给图形(图形元素和容器元素)添加各种专业软件中才有的滤镜特效,喜欢特效的朋友可千万不要错过啊。希望本对你有所帮助。 滤镜称得上是SVG最强大的功能了...

HTML5之SVG 2D入门4—笔画与填充

颜色处理,也就是填充和边框效果;你会发现这里的内容与canvas基本上是一致的。这些属性既可以以属性的形式写在元素中,也可以以CSS的形式保存,这是与canvas不一样的地方。 前面我们重点...

HTML5之SVG 2D入门3—文本与图像及渲染文本介绍

SVG的强大能力之一是它可以将文本控制到标准HTML页面不可能有的程度,而无须求助图像或其它插件,尽管SVG的文本渲染如此强大,但是还是有一个不足之处:SVG不能执行自动换行,接下来介绍SVG中渲染文...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:HTML5之SVG 2D入门8 - 文档结构
举报原因:
原因补充:

(最多只允许输入30个字)