IT博客汇
  • 首页
  • 精华
  • 技术
  • 设计
  • 资讯
  • 扯淡
  • 权利声明
  • 登录 注册

    SVG Content Models (1) : Structure and Shapes

    Rykka发表于 2014-09-20 19:35:00
    love 0

    对 http://www.w3.org/TR/SVG11/struct.html 和 http://www.w3.org/TR/SVG11/shapes.html 的整理笔记。

    目录

    • 1. Container element
      • 1.1. svg
      • 1.2. 'g'
      • 1.3. 'defs'
      • 1.4. 'symbol'
      • 1.5. 'switch'
    • 2. Descriptive element
      • 2.1. 'dest' and 'title'
    • 3. Graphics element
      • 3.1. 'use'
      • 3.2. 'image'
      • 3.3. 'rect'
      • 3.4. 'circle'
      • 3.5. 'ellipse'
      • 3.6. 'line'
      • 3.7. 'polyline'
      • 3.8. 'polygon'

    1. Container element

    1.1. svg

    svg基本容器元素,定义一个SVG文档片段。

    例子:

    
      
    
    
    属性:
    preserveAspectRatio: viewBox的拉伸选项
    'none/xMinYMin/xMaxYMax... meet/slice'

    viewBox: 使图形拉伸/缩放以匹配容器元素。 与 'preserveAspectRatio' 相关。

    'x y height width'

    示例: Demo

    zoomAndPan: 在当前元素/元素组上是否允许缩放和位移。
    'disable | magnify'

    1.2. 'g'

    一个将图形元素组合到一起的容器元素。

    例子:

    
      
      
    
    

    1.3. 'defs'

    一个用于包含引用元素的容器元素。

    例子:

    
      
        
        
      
    
    
    

    1.4. 'symbol'

    用于定义一个图形元件模板。 可用于'use'。

    不会直接进行渲染。

    例子:

    
      
      
    
    

    1.5. 'switch'

    根据 ‘requiredFeatures’, ‘requiredExtensions’ 与 ‘systemLanguage’ 的属性来决定 是否显示其子元素。

    例子:

    
        
           
        
    
    

    2. Descriptive element

    描述性元素

    2.1. 'dest' and 'title'

    用于文档元素的标题和说明

    例子:

    
      Company sales by region
      
        This is a bar chart which shows
        company sales by region.
      
      
    
    

    3. Graphics element

    能够直接产生图形结果的元素。

    3.1. 'use'

    引用一个 'svg','symbol','g','use' 或图形元素(Graphics element), 并将其包含/绘制在相应的文档位置。

    例子:

    
      
    
    
    

    3.2. 'image'

    对一个图形文件进行渲染。

    例子:

    
      My image
    
    

    3.3. 'rect'

    定义一个矩形

    例子:

    
    
    
    
    属性:

    rx: x轴上的圆角弧形半径

    ry: y轴上的圆角弧形半径

    3.4. 'circle'

    定义一个圆形

    例子:

    
    
    Example circle01 - circle filled with red and stroked with blue

    3.5. 'ellipse'

    一个椭圆 例子:

    
    
    
    
    属性:

    rx: x轴上的半径

    ry: y轴上的半径

    Example ellipse01 - examples of ellipses

    3.6. 'line'

    一条直线

    例子:

    
      
      
      
      
      
    
    

    3.7. 'polyline'

    连续的线条, 是一个开放的形状。

    例子:

    
    
    Example polyline01 - increasingly larger bars

    3.8. 'polygon'

    多边形, 是一个闭合的形状。

    例子:

    
    
    
    Example polygon01 - star and hexagon


沪ICP备19023445号-2号
友情链接