SVG Content Models (1) : Structure and Shapes

Rykka at 2014/09/20

本文地址:http://rykka.me/svg_models_1_structure_and_shapes.html

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

1.   Container element

1.1.   svg

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

例子:

<svg xmlns="http://www.w3.org/2000/svg" …>
  <rect …/>
</svg>
属性:
preserveAspectRatio: viewBox的拉伸选项
'none/xMinYMin/xMaxYMax... meet/slice'

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

'x y height width'

示例: Demo

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

1.2.   'g'

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

例子:

<g id="group1" fill="red">
  <rect x="1cm" y="1cm" width="1cm" height="1cm"/>
  <rect x="3cm" y="1cm" width="1cm" height="1cm"/>
</g>

1.3.   'defs'

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

例子:

<defs>
  <linearGradient id="Gradient01">
    <stop offset="20%" stop-color="#39F" />
    <stop offset="90%" stop-color="#F3F" />
  </linearGradient>
</defs>
<rect x="1cm" y="1cm" width="6cm" height="1cm"
      fill="url(#Gradient01)"  />

1.4.   'symbol'

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

不会直接进行渲染。

例子:

<symbol id="group1" fill="red">
  <rect x="1cm" y="1cm" width="1cm" height="1cm"/>
  <rect x="3cm" y="1cm" width="1cm" height="1cm"/>
</symbol>

1.5.   'switch'

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

例子:

<switch>
    <text systemLanguage="mi, en">
       <!-- content goes here -->
    </text>
</switch>

2.   Descriptive element

描述性元素

2.1.   'dest' and 'title'

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

例子:

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

3.   Graphics element

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

3.1.   'use'

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

例子:

<defs>
  <rect id="MyRect" width="60" height="10"/>
</defs>
<use x="20" y="10" xlink:href="#MyRect" />

3.2.   'image'

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

例子:

<image x="200" y="200" width="100px" height="100px"
       xlink:href="myimage.png">
  <title>My image</title>
</image>

3.3.   'rect'

定义一个矩形

例子:

<rect x="1" y="1" width="898" height="398"
      fill="none" stroke="blue" stroke-width="2"/>

<rect x="100" y="100" width="400" height="200" rx="50"
      fill="green" />
属性:

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

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

3.4.   'circle'

定义一个圆形

例子:

<circle cx="600" cy="200" r="100"
      fill="red" stroke="blue" stroke-width="10"  />
Example circle01 - circle filled with red and stroked with blue

3.5.   'ellipse'

一个椭圆 例子:

<ellipse cx='300' cy='300' rx="250" ry="100"
    fill="red"  />

<ellipse transform="translate(900 200) rotate(-30)"
      rx="250" ry="100"
      fill="none" stroke="blue" stroke-width="20"  />
属性:

rx: x轴上的半径

ry: y轴上的半径

Example ellipse01 - examples of ellipses

3.6.   'line'

一条直线

例子:

<g stroke="green" >
  <line x1="100" y1="300" x2="300" y2="100"
          stroke-width="5"  />
  <line x1="300" y1="300" x2="500" y2="100"
          stroke-width="10"  />
  <line x1="500" y1="300" x2="700" y2="100"
          stroke-width="15"  />
  <line x1="700" y1="300" x2="900" y2="100"
          stroke-width="20"  />
  <line x1="900" y1="300" x2="1100" y2="100"
          stroke-width="25"  />
</g>

3.7.   'polyline'

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

例子:

<polyline fill="none" stroke="blue" stroke-width="10"
          points="50,375
                  150,375 150,325 250,325 250,375
                  350,375 350,250 450,250 450,375
                  550,375 550,175 650,175 650,375
                  750,375 750,100 850,100 850,375
                  950,375 950,25 1050,25 1050,375
                  1150,375" />
Example polyline01 - increasingly larger bars

3.8.   'polygon'

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

例子:

<polygon fill="red" stroke="blue" stroke-width="10"
      points="350,75  379,161 469,161 397,215
              423,301 350,250 277,301 303,215
              231,161 321,161" />
<polygon fill="lime" stroke="blue" stroke-width="10"
      points="850,75  958,137.5 958,262.5
              850,325 742,262.6 742,137.5" />
Example polygon01 - star and hexagon