File: shapes.html

package info (click to toggle)
w3-recs 20110107-1
links: PTS, VCS
area: non-free
in suites: bullseye, buster, jessie, jessie-kfreebsd, stretch, wheezy
size: 195,972 kB
ctags: 48,964
sloc: xml: 67,284; makefile: 115; perl: 31
file content (686 lines) | stat: -rw-r--r-- 46,631 bytes
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Basic Shapes – SVG Tiny 1.2</title>
  <link rel="stylesheet" href="style/svg-style.css" type="text/css"/>
  <link rel="stylesheet" href="http://www.w3.org/StyleSheets/TR/W3C-REC" type="text/css"/>
  <link rel="contents" href="expanded-toc.html"/>
  <link rel="prev" href="paths.html"/>
  <link rel="next" href="text.html"/>
</head>
  <body>

<div class="header">
  SVG Tiny 1.2 – 20081222
  <ul>
    <li><a href="index.html">Top</a></li>
    <li><a href="expanded-toc.html">Contents</a></li>
    <li><a href="paths.html">Previous</a></li>
    <li><a href="text.html">Next</a></li>
    <li><a href="elementTable.html">Elements</a></li>
    <li><a href="attributeTable.html">Attributes</a></li>
  </ul>
</div>
    <h1>9 Basic Shapes</h1>

<h2 id="toc">Contents</h2>
<ul class="toc">
  <li>9.1 <a href="shapes.html#Introduction">Introduction</a></li>
  <li>9.2 <a href="shapes.html#RectElement">The 'rect' element</a></li>
  <li>9.3 <a href="shapes.html#CircleElement">The 'circle' element</a></li>
  <li>9.4 <a href="shapes.html#EllipseElement">The 'ellipse' element</a></li>
  <li>9.5 <a href="shapes.html#LineElement">The 'line' element</a></li>
  <li>9.6 <a href="shapes.html#PolylineElement">The 'polyline' element</a></li>
  <li>9.7 <a href="shapes.html#PolygonElement">The 'polygon' element</a>
    <ul class="toc">
      <li>9.7.1 <a href="shapes.html#PointsBNF">The grammar for points specifications in 'polyline' and 'polygon' elements</a></li>
    </ul></li>
</ul>
    <h2 id="Introduction">9.1 Introduction</h2>
    <p>SVG contains the following set of basic shape elements:</p>
    <ul>
      <li>rectangles (including optional rounded corners), created with the <a href="shapes.html#RectElement"><span class="element-name">'rect'</span></a> element,</li>
      <li>circles, created with the <a href="shapes.html#CircleElement"><span class="element-name">'circle'</span></a> element,</li>
      <li>ellipses, created with the <a href="shapes.html#EllipseElement"><span class="element-name">'ellipse'</span></a> element,</li>
      <li>straight lines, created with the <a href="shapes.html#LineElement"><span class="element-name">'line'</span></a> element,</li>
      <li>polylines, created with the <a href="shapes.html#PolylineElement"><span class="element-name">'polyline'</span></a> element, and</li>
      <li>polygons, created with the <a href="shapes.html#PolygonElement"><span class="element-name">'polygon'</span></a> element.</li>
    </ul>
    <p>Mathematically, these shape elements are equivalent to a <a href="paths.html#PathElement"><span class="element-name">'path'</span></a> element that would
    construct the same shape. The basic shapes may be stroked,
    and filled. All of the properties available
    for <a href="paths.html#PathElement"><span class="element-name">'path'</span></a> elements also apply to
    the basic shapes.</p>

    <h2 id="RectElement">9.2 The <span class="element-name">'rect'</span>
    element</h2>
    <p>The <span class="element-name">'rect'</span> element defines
    a rectangle which is axis-aligned with the current <a href="intro.html#TermUserCoordinateSystem">user coordinate
    system</a>. Rounded rectangles can be achieved by setting
    appropriate values for attributes <a href="shapes.html#RectElementRXAttribute"><span class="attr-name">'rx'</span></a> and <a href="shapes.html#RectElementRYAttribute"><span class="attr-name">'ry'</span></a>.</p>
    <div class="schema"><div class="schemaheader"><strong>Schema:</strong> rect<div class="schemasource"><pre>    &lt;define name='rect'&gt;
      &lt;element name='rect'&gt;
        &lt;ref name='rect.AT'/&gt;
        &lt;zeroOrMore&gt;&lt;ref name='shapeCommon.CM'/&gt;&lt;/zeroOrMore&gt;
      &lt;/element&gt;
    &lt;/define&gt;

    &lt;define name='rect.AT' combine='interleave'&gt;
      &lt;ref name='svg.ShapeCommon.attr'/&gt;
      &lt;ref name='svg.XYWH.attr'/&gt;
      &lt;ref name='svg.RxRyCommon.attr'/&gt;
    &lt;/define&gt;
</pre></div></div></div>

    <div class="adef-list">
      <p><em>Attribute definitions:</em></p>
      <dl class="definitions">
        <dt id="RectElementXAttribute"><span class="adef">x</span> = "<span class="attr-value"><a href="types.html#DataTypeCoordinate">&lt;coordinate&gt;</a></span>"</dt>
        <dd><p>The x-axis coordinate of the side of the rectangle
        which has the smaller x-axis coordinate value in the
        current <a href="intro.html#TermUserCoordinateSystem"><span class="svg-term">user coordinate system</span></a>.
        The <a href="intro.html#TermLacunaValue"><span class="svg-term">lacuna value</span></a>
          is <span class="attr-value">'0'</span>.</p>
         <p class="anim-target"><a href="animate.html#Animatable">Animatable</a>:
        yes.</p></dd>
        <dt id="RectElementYAttribute"><span class="adef">y</span> = "<span class="attr-value"><a href="types.html#DataTypeCoordinate">&lt;coordinate&gt;</a></span>"</dt>
        <dd><p>The y-axis coordinate of the side of the rectangle
        which has the smaller y-axis coordinate value in the
        current <a href="intro.html#TermUserCoordinateSystem"><span class="svg-term">user coordinate system</span></a>.
        The <a href="intro.html#TermLacunaValue"><span class="svg-term">lacuna value</span></a>
          is <span class="attr-value">'0'</span>.</p>
         <p class="anim-target"><a href="animate.html#Animatable">Animatable</a>:
        yes.</p></dd>
        <dt id="RectElementWidthAttribute"><span class="adef">width</span> = "<span class="attr-value"><a href="types.html#DataTypeLength">&lt;length&gt;</a></span>"</dt>
        <dd><p>The width of the rectangle.
          A negative value is <a href="intro.html#TermUnsupportedValue"><span class="svg-term">unsupported</span></a>.
         A value of zero disables rendering of the element.
        The <a href="intro.html#TermLacunaValue"><span class="svg-term">lacuna value</span></a>
        is <span class="attr-value">'0'</span>.</p>
         <p class="anim-target"><a href="animate.html#Animatable">Animatable</a>:
        yes.</p></dd>
        <dt id="RectElementHeightAttribute"><span class="adef">height</span> = "<span class="attr-value"><a href="types.html#DataTypeLength">&lt;length&gt;</a></span>"</dt>
        <dd><p>The height of the rectangle.
          A negative value is <a href="intro.html#TermUnsupportedValue"><span class="svg-term">unsupported</span></a>.
          A value of zero disables rendering of the element.
        The <a href="intro.html#TermLacunaValue"><span class="svg-term">lacuna value</span></a>
        is <span class="attr-value">'0'</span>.</p>
         <p class="anim-target"><a href="animate.html#Animatable">Animatable</a>:
        yes.</p></dd>
        <dt id="RectElementRXAttribute"><span class="adef">rx</span> = "<span class="attr-value"><a href="types.html#DataTypeLength">&lt;length&gt;</a></span>"</dt>
        <dd><p>For rounded rectangles, the x-axis radius of the
        ellipse used to round off the corners of the
        rectangle.
        A negative value is <a href="intro.html#TermUnsupportedValue"><span class="svg-term">unsupported</span></a>.
         See the notes below about what happens if the attribute is
         not specified.</p>
         <p class="anim-target"><a href="animate.html#Animatable">Animatable</a>:
        yes.</p></dd>
        <dt id="RectElementRYAttribute"><span class="adef">ry</span> = "<span class="attr-value"><a href="types.html#DataTypeLength">&lt;length&gt;</a></span>"</dt>
        <dd><p>For rounded rectangles, the y-axis radius of the
        ellipse used to round off the corners of the
        rectangle.
        A negative value is <a href="intro.html#TermUnsupportedValue"><span class="svg-term">unsupported</span></a>.
         See the notes below about what happens if the attribute is
         not specified.</p>
         <p class="anim-target"><a href="animate.html#Animatable">Animatable</a>:
        yes.</p></dd>

       <dt><a id="RectFocusableAttribute" name="rectFocusableAttribute"></a> <span class="adef">focusable</span> = <span class="attr-value">"true" | "false" | "auto"</span></dt>
       <dd><p>See <a href="interact.html#focusable-attr">attribute definition</a> for description.</p>
                <p class="anim-target"><a href="animate.html#Animatable">Animatable</a>: yes.</p></dd>

          <dt><span class="adef">Navigation Attributes</span></dt>
          <dd><p>See <a href="interact.html#specifyingnavigation">definition</a>.</p></dd>

      </dl>
    </div>
    <p>If a properly specified value is provided for <a href="shapes.html#RectElementRXAttribute"><span class="attr-name">'rx'</span></a> but not for <a href="shapes.html#RectElementRYAttribute"><span class="attr-name">'ry'</span></a>, then the user agent must process
    the <a href="shapes.html#RectElement"><span class="element-name">'rect'</span></a> element with the
    effective value for <a href="shapes.html#RectElementRYAttribute"><span class="attr-name">'ry'</span></a> as equal to <a href="shapes.html#RectElementRXAttribute"><span class="attr-name">'rx'</span></a>. If a properly specified value
    is provided for <a href="shapes.html#RectElementRYAttribute"><span class="attr-name">'ry'</span></a> but not for <a href="shapes.html#RectElementRXAttribute"><span class="attr-name">'rx'</span></a>, then the user agent must process
    the <a href="shapes.html#RectElement"><span class="element-name">'rect'</span></a> element with the
    effective value for <a href="shapes.html#RectElementRXAttribute"><span class="attr-name">'rx'</span></a> as equal to <a href="shapes.html#RectElementRYAttribute"><span class="attr-name">'ry'</span></a>. If neither <a href="shapes.html#RectElementRXAttribute"><span class="attr-name">'rx'</span></a> nor <a href="shapes.html#RectElementRYAttribute"><span class="attr-name">'ry'</span></a> has a properly specified value,
    then the user agent must process the <a href="shapes.html#RectElement"><span class="element-name">'rect'</span></a> element as if no
    rounding had been specified, resulting in square corners. If <a href="shapes.html#RectElementRXAttribute"><span class="attr-name">'rx'</span></a> is greater than half of the
    width of the rectangle, then the user agent must process the <a href="shapes.html#RectElement"><span class="element-name">'rect'</span></a> element with the
    effective value for <a href="shapes.html#RectElementRXAttribute"><span class="attr-name">'rx'</span></a> as half of the width of the
    rectangle. If <a href="shapes.html#RectElementRYAttribute"><span class="attr-name">'ry'</span></a> is greater than half of the
    height of the rectangle, then the user agent must process the <a href="shapes.html#RectElement"><span class="element-name">'rect'</span></a> element with the
    effective value for <a href="shapes.html#RectElementRYAttribute"><span class="attr-name">'ry'</span></a> as half of the height of the
    rectangle.</p>
    <p>A <a href="shapes.html#RectElement"><span class="element-name">'rect'</span></a> element, taking its rounded
    corners into account, must be rendered in a way that produces the
    same result as if the following
    outline were specified instead
    (note: all coordinate and length values are first converted
    into <a href="intro.html#TermUserSpace"><span class="svg-term">user space</span></a> coordinates according to <a href="coords.html#Units">Units</a>):</p>
    <ol>
      <li>Perform an absolute <a href="paths.html#PathDataMovetoCommands">moveto</a> operation to location (<em>x+rx</em>,<em>y</em>), where <em>x</em> and <em>y</em> are the values of the
         <a href="shapes.html#RectElement"><span class="element-name">'rect'</span></a> element's <a href="shapes.html#RectElementXAttribute"><span class="attr-name">'x'</span></a>
         and <a href="shapes.html#RectElementYAttribute"><span class="attr-name">'y'</span></a> attribute converted to <a href="intro.html#TermUserSpace"><span class="svg-term">user space</span></a>, and <em>rx</em> and <em>ry</em> are the effective values of the
         <a href="shapes.html#RectElementRXAttribute"><span class="attr-name">'rx'</span></a> and <a href="shapes.html#RectElementRYAttribute"><span class="attr-name">'ry'</span></a> attributes converted to user space.</li> 
      <li>Perform an absolute horizontal <a href="paths.html#PathDataLinetoCommands">lineto</a> operation to location (<em>x+width-rx</em>,<em>y</em>), where <em>width</em> is the <a href="shapes.html#RectElement"><span class="element-name">'rect'</span></a> element's <a href="shapes.html#RectElementWidthAttribute"><span class="attr-name">'width'</span></a> attribute converted to user space.</li>  
      <li>Perform an absolute elliptical arc operation to coordinate (<em>x+width</em>,<em>y+ry</em>), where the effective values for the <a href="shapes.html#RectElementRXAttribute"><span class="attr-name">'rx'</span></a> and <a href="shapes.html#RectElementRYAttribute"><span class="attr-name">'ry'</span></a> attributes on the
         <a href="shapes.html#RectElement"><span class="element-name">'rect'</span></a> element converted to user space are used as the semimajor and semiminor axis, respectively, zero x-axis-rotation, a clockwise sweep direction and choosing the smaller arc sweep.</li>
      <li>Perform an absolute vertical <em>lineto</em> operation to location (<em>x+width</em>,<em>y+height-ry</em>), where <em>height</em> is the <a href="shapes.html#RectElement"><span class="element-name">'rect'</span></a> element's <a href="shapes.html#RectElementWidthAttribute"><span class="attr-name">'height'</span></a> attribute converted to user space.</li>      
      <li>Perform an absolute elliptical arc operation to coordinate (<em>x+width-rx</em>,<em>y+height</em>).</li>
      <li>Perform an absolute horizontal <em>lineto</em> operation to location (<em>x+rx</em>,<em>y+height</em>).</li>
      <li>Perform an absolute elliptical arc operation to coordinate (<em>x</em>,<em>y+height-ry</em>).</li>
      
      <li>Perform an absolute vertical <em>lineto</em> operation to location (<em>x</em>,<em>y+ry</em>).</li>
      <li>Perform an absolute elliptical arc operation to coordinate (<em>x+rx</em>,<em>y</em>).</li>
      <li>Perform a <a href="paths.html#PathDataClosePathCommand">closepath</a> (z) to the coordinate specified in the original <a href="paths.html#PathDataMovetoCommands">moveto</a> operation.</li>
    </ol>
   <p>In case the <a href="shapes.html#RectElementRXAttribute"><span class="attr-name">'rx'</span></a> and <a href="shapes.html#RectElementRYAttribute"><span class="attr-name">'ry'</span></a> attributes are not specified or set to a value of zero, the elliptical arc commands should be omitted.</p>
    
   <p id="ExampleRect01"><span class="example-ref">Example 09_01</span> shows a
    rectangle with sharp corners. The <a href="shapes.html#RectElement"><span class="element-name">'rect'</span></a> element is filled with
    yellow and stroked with navy.</p>
      <div class="example"><div class="exampleheader"><strong>Example:</strong> <a href="examples/09_01.svg">09_01.svg</a></div><div class="examplesource"><pre>&lt;?xml version="1.0"?&gt;
&lt;svg width="12cm" height="4cm" viewBox="0 0 1200 400"
     xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny"&gt;
  &lt;desc&gt;Example rect01 - rectangle with sharp corners&lt;/desc&gt;
  &lt;!-- Show outline of canvas using 'rect' element --&gt;
  &lt;rect x="1" y="1" width="1198" height="398"
        fill="none" stroke="blue" stroke-width="2"/&gt;
  &lt;rect x="400" y="100" width="400" height="200"
        fill="yellow" stroke="navy" stroke-width="10"  /&gt;
&lt;/svg&gt;
</pre></div><div class="exampleimage"><img alt="Rendering of 09_01.svg" src="examples/09_01.png" /></div></div>

    <p id="ExampleRect02"><span class="example-ref">Example 09_02</span> shows two
    rounded rectangles. The <a href="shapes.html#RectElementRXAttribute"><span class="attr-name">'rx'</span></a> specifies how to round the
    corners of the rectangles. Note that since no value has been
    specified for the <a href="shapes.html#RectElementRYAttribute"><span class="attr-name">'ry'</span></a> attribute, it will be assigned
    the same value as the <a href="shapes.html#RectElementRXAttribute"><span class="attr-name">'rx'</span></a> attribute.</p>
      <div class="example"><div class="exampleheader"><strong>Example:</strong> <a href="examples/09_02.svg">09_02.svg</a></div><div class="examplesource"><pre>&lt;?xml version="1.0"?&gt;
&lt;svg width="12cm" height="4cm" viewBox="0 0 1200 400"
     xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny"&gt;
  &lt;desc&gt;Example rect02 - rounded rectangles&lt;/desc&gt;
  &lt;!-- Show outline of canvas using 'rect' element --&gt;
  &lt;rect x="1" y="1" width="1198" height="398"
        fill="none" stroke="blue" stroke-width="2"/&gt;
  &lt;rect x="100" y="100" width="400" height="200" rx="50"
        fill="green" /&gt;
  &lt;g transform="translate(700 210) rotate(-30)"&gt;
    &lt;rect x="0" y="0" width="400" height="200" rx="50"
          fill="none" stroke="purple" stroke-width="30" /&gt;
  &lt;/g&gt;
&lt;/svg&gt;
</pre></div><div class="exampleimage"><img alt="Rendering of 09_02.svg" src="examples/09_02.png" /></div></div>

    <h2 id="CircleElement">9.3 The <span class="element-name">'circle'</span>
    element</h2>
    <p>The <span class="element-name">'circle'</span> element
    defines a circle based on a center point and a radius.</p>

    <p>Within the current <a href="intro.html#TermUserCoordinateSystem"><span class="svg-term">user coordinate system</span></a>,
    stroking operations on a circle begin at the point (cx+r,cy)
    and then proceed through the points (cx,cy+r), (cx-r,cy), (cx,cy-r) and finally back to (cx+r,cy).
    For stroking operations, there is only one line segment
    which has its beginning <a href="painting.html#StrokeLinejoinProperty">joined</a> to its end.</p>

    <div class="schema"><div class="schemaheader"><strong>Schema:</strong> circle<div class="schemasource"><pre>    &lt;define name='circle'&gt;
      &lt;element name='circle'&gt;
        &lt;ref name='circle.AT'/&gt;
        &lt;zeroOrMore&gt;&lt;ref name='shapeCommon.CM'/&gt;&lt;/zeroOrMore&gt;
      &lt;/element&gt;
    &lt;/define&gt;

    &lt;define name='circle.AT' combine='interleave'&gt;
      &lt;ref name='svg.ShapeCommon.attr'/&gt;
      &lt;ref name='svg.CxCy.attr'/&gt;
      &lt;ref name='svg.R.attr'/&gt;
    &lt;/define&gt;
</pre></div></div></div>

    <div class="adef-list">
      <p><em>Attribute definitions:</em></p>
      <dl class="definitions">
        <dt id="CircleElementCXAttribute"><span class="adef">cx</span> = "<span class="attr-value"><a href="types.html#DataTypeCoordinate">&lt;coordinate&gt;</a></span>"</dt>
        <dd><p>The x-axis coordinate of the center of the
        circle.
        The <a href="intro.html#TermLacunaValue"><span class="svg-term">lacuna value</span></a>
        is <span class="attr-value">'0'</span>.</p>
         <p class="anim-target"><a href="animate.html#Animatable">Animatable</a>:
        yes.</p></dd>
        <dt id="CircleElementCYAttribute"><span class="adef">cy</span> = "<span class="attr-value"><a href="types.html#DataTypeCoordinate">&lt;coordinate&gt;</a></span>"</dt>
        <dd><p>The y-axis coordinate of the center of the
        circle.
        The <a href="intro.html#TermLacunaValue"><span class="svg-term">lacuna value</span></a>
        is <span class="attr-value">'0'</span>.</p>
         <p class="anim-target"><a href="animate.html#Animatable">Animatable</a>:
        yes.</p></dd>
        <dt id="CircleElementRAttribute"><span class="adef">r</span> = "<span class="attr-value"><a href="types.html#DataTypeLength">&lt;length&gt;</a></span>"</dt>
        <dd><p>The radius of the circle.
         A negative value is <a href="intro.html#TermUnsupportedValue"><span class="svg-term">unsupported</span></a>.
         A value of zero disables rendering of the element.
        The <a href="intro.html#TermLacunaValue"><span class="svg-term">lacuna value</span></a>
        is <span class="attr-value">'0'</span>.</p>
         <p class="anim-target"><a href="animate.html#Animatable">Animatable</a>:
        yes.</p></dd>

       <dt><a id="CircleFocusableAttribute" name="circleFocusableAttribute"></a> <span class="adef">focusable</span> = <span class="attr-value">"true" | "false" | "auto"</span></dt>
       <dd><p>See <a href="interact.html#focusable-attr">attribute definition</a> for description.</p>
         <p class="anim-target"><a href="animate.html#Animatable">Animatable</a>: yes.</p></dd>

          <dt><span class="adef">Navigation Attributes</span></dt>
          <dd><p>See <a href="interact.html#specifyingnavigation">definition</a>.</p></dd>

      </dl>
    </div>

    <p id="ExampleCircle01"><span class="example-ref">Example circle01</span> consists
      of a <a href="shapes.html#CircleElement"><span class="element-name">'circle'</span></a> element that is
    filled with red and stroked with blue.</p>
      <div class="example"><div class="exampleheader"><strong>Example:</strong> <a href="examples/09_03.svg">09_03.svg</a></div><div class="examplesource"><pre>&lt;?xml version="1.0"?&gt;
&lt;svg width="12cm" height="4cm" viewBox="0 0 1200 400"
     xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny"&gt;
  &lt;desc&gt;Example circle01 - circle filled with red and stroked with blue&lt;/desc&gt;
  &lt;!-- Show outline of canvas using 'rect' element --&gt;
  &lt;rect x="1" y="1" width="1198" height="398"
        fill="none" stroke="blue" stroke-width="2"/&gt;
  &lt;circle cx="600" cy="200" r="100"
        fill="red" stroke="blue" stroke-width="10"  /&gt;
&lt;/svg&gt;
</pre></div><div class="exampleimage"><img alt="Rendering of 09_03.svg" src="examples/09_03.png" /></div></div>

    <h2 id="EllipseElement">9.4 The <span class="element-name">'ellipse'</span>
    element</h2>
    <p>The <span class="element-name">'ellipse'</span> element
    defines an ellipse which is axis-aligned with the current <a href="intro.html#TermUserCoordinateSystem">user coordinate
    system</a> based on a center point and two radii.</p>

    <p>Within the current <a href="intro.html#TermUserCoordinateSystem"><span class="svg-term">user coordinate system</span></a>,
    stroking operations on a ellipse begin at the point (cx+rx,cy)
    and then proceed through the points (cx,cy+ry), (cx-rx,cy), (cx,cy-ry) and finally back to (cx+rx,cy).
    For stroking operations, there is only one line segment
    which has its beginning <a href="painting.html#StrokeLinejoinProperty">joined</a> to its end.</p>

    <div class="schema"><div class="schemaheader"><strong>Schema:</strong> ellipse<div class="schemasource"><pre>    &lt;define name='ellipse'&gt;
      &lt;element name='ellipse'&gt;
        &lt;ref name='ellipse.AT'/&gt;
        &lt;zeroOrMore&gt;&lt;ref name='shapeCommon.CM'/&gt;&lt;/zeroOrMore&gt;
      &lt;/element&gt;
    &lt;/define&gt;

    &lt;define name='ellipse.AT' combine='interleave'&gt;
      &lt;ref name='svg.ShapeCommon.attr'/&gt;
      &lt;ref name='svg.RxRyCommon.attr'/&gt;
      &lt;ref name='svg.CxCy.attr'/&gt;
    &lt;/define&gt;
</pre></div></div></div>

    <div class="adef-list">
      <p><em>Attribute definitions:</em></p>
      <dl class="definitions">
        <dt id="EllipseElementCXAttribute"><span class="adef">cx</span> = "<span class="attr-value"><a href="types.html#DataTypeCoordinate">&lt;coordinate&gt;</a></span>"</dt>
        <dd><p>The x-axis coordinate of the center of the
            ellipse.
        The <a href="intro.html#TermLacunaValue"><span class="svg-term">lacuna value</span></a>
        is <span class="attr-value">'0'</span>.</p>
         <p class="anim-target"><a href="animate.html#Animatable">Animatable</a>:
        yes.</p></dd>
        <dt id="EllipseElementCYAttribute"><span class="adef">cy</span> = "<span class="attr-value"><a href="types.html#DataTypeCoordinate">&lt;coordinate&gt;</a></span>"</dt>
        <dd><p>The y-axis coordinate of the center of the
        ellipse.
        The <a href="intro.html#TermLacunaValue"><span class="svg-term">lacuna value</span></a>
        is <span class="attr-value">'0'</span>.</p>
         <p class="anim-target"><a href="animate.html#Animatable">Animatable</a>:
        yes.</p></dd>
        <dt id="EllipseElementRXAttribute"><span class="adef">rx</span> = "<span class="attr-value"><a href="types.html#DataTypeLength">&lt;length&gt;</a></span>"</dt>
        <dd><p>The x-axis radius of the ellipse.
            A negative value is <a href="intro.html#TermUnsupportedValue"><span class="svg-term">unsupported</span></a>.
         A value of zero disables rendering of the element.
        The <a href="intro.html#TermLacunaValue"><span class="svg-term">lacuna value</span></a>
        is <span class="attr-value">'0'</span>.</p>
         <p class="anim-target"><a href="animate.html#Animatable">Animatable</a>:
        yes.</p></dd>
        <dt id="EllipseElementRYAttribute"><span class="adef">ry</span> = "<span class="attr-value"><a href="types.html#DataTypeLength">&lt;length&gt;</a></span>"</dt>
        <dd><p>The y-axis radius of the ellipse.
            A negative value is <a href="intro.html#TermUnsupportedValue"><span class="svg-term">unsupported</span></a>.
         A value of zero disables rendering of the element.
        The <a href="intro.html#TermLacunaValue"><span class="svg-term">lacuna value</span></a>
        is <span class="attr-value">'0'</span>.</p>
         <p class="anim-target"><a href="animate.html#Animatable">Animatable</a>:
        yes.</p></dd>

       <dt><a id="EllipseFocusableAttribute" name="ellipseFocusableAttribute"></a> <span class="adef">focusable</span> = <span class="attr-value">"true" | "false" | "auto"</span></dt>
       <dd><p>See <a href="interact.html#focusable-attr">attribute definition</a> for description.</p>
         <p class="anim-target"><a href="animate.html#Animatable">Animatable</a>: yes.</p></dd>

          <dt><span class="adef">Navigation Attributes</span></dt>
          <dd><p>See <a href="interact.html#specifyingnavigation">definition</a>.</p></dd>

      </dl>
    </div>
    <p><span class="example-ref">Example 09_04</span> below
    specifies the coordinates of the two ellipses in the
    <a href="intro.html#TermUserCoordinateSystem"><span class="svg-term">user coordinate system</span></a> established by the <a href="coords.html#ViewBoxAttribute"><span class="attr-name">'viewBox'</span></a> attribute on the <a href="struct.html#SVGElement"><span class="element-name">'svg'</span></a> element and the <a href="coords.html#TransformAttribute"><span class="attr-name">'transform'</span></a> attribute on the <a href="struct.html#GElement"><span class="element-name">'g'</span></a> and <a href="shapes.html#EllipseElement"><span class="element-name">'ellipse'</span></a> elements. Both
        ellipses use the <a href="intro.html#TermLacunaValue"><span class="svg-term">lacuna value</span></a> of zero for the <a href="shapes.html#EllipseElementCXAttribute"><span class="attr-name">'cx'</span></a> and <a href="shapes.html#EllipseElementCXAttribute"><span class="attr-name">'cy'</span></a> attributes (the center of the
    ellipse). The second ellipse is rotated.</p>
      <div class="example"><div class="exampleheader"><strong>Example:</strong> <a href="examples/09_04.svg">09_04.svg</a></div><div class="examplesource"><pre>&lt;?xml version="1.0"?&gt;
&lt;svg width="12cm" height="4cm" viewBox="0 0 1200 400"
     xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny"&gt;
  &lt;desc&gt;Example ellipse01 - examples of ellipses&lt;/desc&gt;
  &lt;!-- Show outline of canvas using 'rect' element --&gt;
  &lt;rect x="1" y="1" width="1198" height="398"
        fill="none" stroke="blue" stroke-width="2" /&gt;
  &lt;g transform="translate(300 200)"&gt;
    &lt;ellipse rx="250" ry="100"
          fill="red"  /&gt;
  &lt;/g&gt;
  &lt;ellipse transform="translate(900 200) rotate(-30)" 
        rx="250" ry="100"
        fill="none" stroke="blue" stroke-width="20"  /&gt;
&lt;/svg&gt;
</pre></div><div class="exampleimage"><img alt="Rendering of 09_04.svg" src="examples/09_04.png" /></div></div>

    <h2 id="LineElement">9.5 The <span class="element-name">'line'</span>
    element</h2>
    <p>The <span class="element-name">'line'</span> element defines
    a line segment that starts at one point and ends at
    another.</p>

    <div class="schema"><div class="schemaheader"><strong>Schema:</strong> line<div class="schemasource"><pre>    &lt;define name='line'&gt;
      &lt;element name='line'&gt;
        &lt;ref name='line.AT'/&gt;
        &lt;zeroOrMore&gt;&lt;ref name='shapeCommon.CM'/&gt;&lt;/zeroOrMore&gt;
      &lt;/element&gt;
    &lt;/define&gt;

    &lt;define name='line.AT' combine='interleave'&gt;
      &lt;ref name='svg.ShapeCommon.attr'/&gt;
      &lt;ref name='svg.X12Y12.attr'/&gt;
    &lt;/define&gt;
</pre></div></div></div>

    <div class="adef-list">
      <p><em>Attribute definitions:</em></p>
      <dl class="definitions">
        <dt id="LineElementX1Attribute"><span class="adef">x1</span> = "<span class="attr-value"><a href="types.html#DataTypeCoordinate">&lt;coordinate&gt;</a></span>"</dt>
        <dd><p>The x-axis coordinate of the start of the line.
        The <a href="intro.html#TermLacunaValue"><span class="svg-term">lacuna value</span></a>
        is <span class="attr-value">'0'</span>.</p>
         <p class="anim-target"><a href="animate.html#Animatable">Animatable</a>:
        yes.</p></dd>
        <dt id="LineElementY1Attribute"><span class="adef">y1</span> = "<span class="attr-value"><a href="types.html#DataTypeCoordinate">&lt;coordinate&gt;</a></span>"</dt>
        <dd><p>The y-axis coordinate of the start of the line.
        The <a href="intro.html#TermLacunaValue"><span class="svg-term">lacuna value</span></a>
        is <span class="attr-value">'0'</span>.</p>
         <p class="anim-target"><a href="animate.html#Animatable">Animatable</a>:
        yes.</p></dd>
        <dt id="LineElementX2Attribute"><span class="adef">x2</span> = "<span class="attr-value"><a href="types.html#DataTypeCoordinate">&lt;coordinate&gt;</a></span>"</dt>
        <dd><p>The x-axis coordinate of the end of the line.
        The <a href="intro.html#TermLacunaValue"><span class="svg-term">lacuna value</span></a>
        is <span class="attr-value">'0'</span>.</p>
         <p class="anim-target"><a href="animate.html#Animatable">Animatable</a>:
        yes.</p></dd>
        <dt id="LineElementY2Attribute"><span class="adef">y2</span> = "<span class="attr-value"><a href="types.html#DataTypeCoordinate">&lt;coordinate&gt;</a></span>"</dt>
        <dd><p>The y-axis coordinate of the end of the line.
        The <a href="intro.html#TermLacunaValue"><span class="svg-term">lacuna value</span></a>
        is <span class="attr-value">'0'</span>.</p>
         <p class="anim-target"><a href="animate.html#Animatable">Animatable</a>:
        yes.</p></dd>

       <dt><a id="LineFocusableAttribute" name="lineFocusableAttribute"></a> <span class="adef">focusable</span> = <span class="attr-value">"true" | "false" | "auto"</span></dt>
       <dd><p>See <a href="interact.html#focusable-attr">attribute definition</a> for description.</p>
                <p class="anim-target"><a href="animate.html#Animatable">Animatable</a>: yes.</p></dd>

          <dt><span class="adef">Navigation Attributes</span></dt>
          <dd><p>See <a href="interact.html#specifyingnavigation">definition</a>.</p></dd>

      </dl>
    </div>
    <p>A <a href="shapes.html#LineElement"><span class="element-name">'line'</span></a> element must be rendered in a way that produces the
    same result as if the following
    <a href="paths.html">path</a> were specified instead
    (note: all coordinate and length values are first converted
    into <a href="intro.html#TermUserSpace"><span class="svg-term">user space</span></a> coordinates according to <a href="coords.html#Units">Units</a>):</p>
    <ol>
      <li>Perform an absolute <a href="paths.html#PathDataMovetoCommands">moveto</a> operation
      to absolute location (<em>x1</em>,<em>y1</em>), where
      <em>x1</em> and <em>y1</em> are the values of the <a href="shapes.html#LineElement"><span class="element-name">'line'</span></a> element's <a href="shapes.html#LineElementX1Attribute"><span class="attr-name">'x1'</span></a> and <a href="shapes.html#LineElementY1Attribute"><span class="attr-name">'y1'</span></a> attributes converted to
      <a href="intro.html#TermUserSpace"><span class="svg-term">user space</span></a>, respectively.</li>
      <li>Perform an absolute <a href="paths.html#PathDataLinetoCommands">lineto</a> operation
      to absolute location (<em>x2</em>,<em>y2</em>), where
      <em>x2</em> and <em>y2</em> are the values of the <a href="shapes.html#LineElement"><span class="element-name">'line'</span></a> element's <a href="shapes.html#LineElementX2Attribute"><span class="attr-name">'x2'</span></a> and <a href="shapes.html#LineElementY2Attribute"><span class="attr-name">'y2'</span></a> attributes converted to
      <a href="intro.html#TermUserSpace"><span class="svg-term">user space</span></a>, respectively.</li>
    </ol>
    <p>Because <a href="shapes.html#LineElement"><span class="element-name">'line'</span></a> elements are single
    lines and thus are geometrically one-dimensional, they have no
    interior; thus, <a href="shapes.html#LineElement"><span class="element-name">'line'</span></a> elements are never
    filled (see the <a href="painting.html#FillProperty"><span class="prop-name">'fill'</span></a> property).</p>
    <p id="ExampleLine01"><span class="example-ref">Example 09_05</span> below
    specifies the coordinates of the five lines in the
    <a href="intro.html#TermUserCoordinateSystem"><span class="svg-term">user coordinate system</span></a> established by the <a href="coords.html#ViewBoxAttribute"><span class="attr-name">'viewBox'</span></a> attribute on the <a href="struct.html#SVGElement"><span class="element-name">'svg'</span></a> element. The lines have
    different thicknesses.</p>
      <div class="example"><div class="exampleheader"><strong>Example:</strong> <a href="examples/09_05.svg">09_05.svg</a></div><div class="examplesource"><pre>&lt;?xml version="1.0"?&gt;
&lt;svg width="12cm" height="4cm" viewBox="0 0 1200 400"
     xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny"&gt;
  &lt;desc&gt;Example line01 - lines expressed in user coordinates&lt;/desc&gt;
  &lt;!-- Show outline of canvas using 'rect' element --&gt;
  &lt;rect x="1" y="1" width="1198" height="398"
        fill="none" stroke="blue" stroke-width="2" /&gt;
  &lt;g stroke="green" &gt;
    &lt;line x1="100" y1="300" x2="300" y2="100"
            stroke-width="5"  /&gt;
    &lt;line x1="300" y1="300" x2="500" y2="100"
            stroke-width="10"  /&gt;
    &lt;line x1="500" y1="300" x2="700" y2="100"
            stroke-width="15"  /&gt;
    &lt;line x1="700" y1="300" x2="900" y2="100"
            stroke-width="20"  /&gt;
    &lt;line x1="900" y1="300" x2="1100" y2="100"
            stroke-width="25"  /&gt;
  &lt;/g&gt;
&lt;/svg&gt;
</pre></div><div class="exampleimage"><img alt="Rendering of 09_05.svg" src="examples/09_05.png" /></div></div>

    <h2 id="PolylineElement">9.6 The <span class="element-name">'polyline'</span>
    element</h2>
    <p>The <span class="element-name">'polyline'</span> element
    defines a set of connected straight line segments. Typically,
    <span class="element-name">'polyline'</span> elements define
    open shapes.</p>


    <div class="schema"><div class="schemaheader"><strong>Schema:</strong> polyline<div class="schemasource"><pre>    &lt;define name='polyline'&gt;
      &lt;element name='polyline'&gt;
        &lt;ref name='polyCommon.AT'/&gt;
        &lt;zeroOrMore&gt;&lt;ref name='shapeCommon.CM'/&gt;&lt;/zeroOrMore&gt;
      &lt;/element&gt;
    &lt;/define&gt;

    &lt;define name='polyCommon.AT' combine='interleave'&gt;
      &lt;ref name='svg.ShapeCommon.attr'/&gt;
      &lt;optional&gt;
        &lt;attribute name='points' svg:animatable='true' svg:inheritable='false'&gt;
          &lt;ref name='Points.datatype'/&gt;
        &lt;/attribute&gt;
      &lt;/optional&gt;
    &lt;/define&gt;
</pre></div></div></div>

    <div class="adef-list">
      <p><em>Attribute definitions:</em></p>
      <dl class="definitions">
        <dt id="PolylineElementPointsAttribute"><span class="adef">points</span> = "<span class="attr-value"><a href="shapes.html#PointsBNF">&lt;points-data&gt;</a></span>"</dt>
        <dd><p>The points that make up the polyline. All coordinate
            values are in the <a href="intro.html#TermUserCoordinateSystem"><span class="svg-term">user coordinate system</span></a>.</p>
          <p>An empty attribute value (<span class="attr-value">points=""</span>) disables rendering of the element.
        The <a href="intro.html#TermLacunaValue"><span class="svg-term">lacuna value</span></a>
        is the empty string.</p>
         <p class="anim-target"><a href="animate.html#Animatable">Animatable</a>:
        yes.</p></dd>

       <dt><a id="PolylineFocusableAttribute" name="polylineFocusableAttribute"></a> <span class="adef">focusable</span> = <span class="attr-value">"true" | "false" | "auto"</span></dt>
       <dd><p>See <a href="interact.html#focusable-attr">attribute definition</a> for description.</p>
                <p class="anim-target"><a href="animate.html#Animatable">Animatable</a>: yes.</p></dd>

          <dt><span class="adef">Navigation Attributes</span></dt>
          <dd><p>See <a href="interact.html#specifyingnavigation">definition</a>.</p></dd>
      </dl>
    </div>
    <p>If an odd number of coordinates is provided, then the
    element is treated as if the attribute had not been specified.
    </p>
    <p>A <a href="shapes.html#PolylineElement"><span class="element-name">'polyline'</span></a> element must be rendered in a way that produces the
    same result as if the following
    <a href="paths.html">path</a> were specified instead:</p>
    <ol>
      <li>Perform an absolute <a href="paths.html#PathDataMovetoCommands">moveto</a> operation
      to the first coordinate pair in the list of points.</li>
      <li>For each subsequent coordinate pair, perform an absolute
      <a href="paths.html#PathDataLinetoCommands">lineto</a>
      operation to that coordinate pair.</li>
    </ol>
    <p id="ExamplePolyline01"><span class="example-ref">Example 09_06</span> below
    specifies a polyline in the <a href="intro.html#TermUserCoordinateSystem"><span class="svg-term">user coordinate system</span></a> established
    by the <a href="coords.html#ViewBoxAttribute"><span class="attr-name">'viewBox'</span></a> attribute on the <a href="struct.html#SVGElement"><span class="element-name">'svg'</span></a> element.</p>
      <div class="example"><div class="exampleheader"><strong>Example:</strong> <a href="examples/09_06.svg">09_06.svg</a></div><div class="examplesource"><pre>&lt;?xml version="1.0"?&gt;
&lt;svg width="12cm" height="4cm" viewBox="0 0 1200 400"
     xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny"&gt;
  &lt;desc&gt;Example polyline01 - increasingly larger bars&lt;/desc&gt;
  &lt;!-- Show outline of canvas using 'rect' element --&gt;
  &lt;rect x="1" y="1" width="1198" height="398"
        fill="none" stroke="blue" stroke-width="2" /&gt;
  &lt;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" /&gt;
&lt;/svg&gt;</pre></div><div class="exampleimage"><img alt="Rendering of 09_06.svg" src="examples/09_06.png" /></div></div>

    <h2 id="PolygonElement">9.7 The <span class="element-name">'polygon'</span>
    element</h2>
    <p>The <span class="element-name">'polygon'</span> element
    defines a closed shape consisting of a set of connected
    straight line segments.</p>

    <div class="schema"><div class="schemaheader"><strong>Schema:</strong> polygon<div class="schemasource"><pre>    &lt;define name='polygon'&gt;
      &lt;element name='polygon'&gt;
        &lt;ref name='polyCommon.AT'/&gt;
        &lt;zeroOrMore&gt;&lt;ref name='shapeCommon.CM'/&gt;&lt;/zeroOrMore&gt;
      &lt;/element&gt;
    &lt;/define&gt;
</pre></div></div></div>

    <div class="adef-list">
      <p><em>Attribute definitions:</em></p>
      <dl class="definitions">
        <dt id="PolygonElementPointsAttribute"><span class="adef">points</span> = "<span class="attr-value"><a href="shapes.html#PointsBNF">&lt;points-data&gt;</a></span>"</dt>
        <dd><p>The points that make up the polygon. All coordinate
            values are in the <a href="intro.html#TermUserCoordinateSystem"><span class="svg-term">user coordinate system</span></a>.</p>
          <p>An empty attribute value (<span class="attr-value">points=""</span>) disables rendering of the element.
        The <a href="intro.html#TermLacunaValue"><span class="svg-term">lacuna value</span></a>
        is the empty string.</p>
         <p class="anim-target"><a href="animate.html#Animatable">Animatable</a>:
        yes.</p></dd>

       <dt><a id="PolygonFocusableAttribute" name="polygonFocusableAttribute"></a> <span class="adef">focusable</span> = <span class="attr-value">"true" | "false" | "auto"</span></dt>
       <dd><p>See <a href="interact.html#focusable-attr">attribute definition</a> for description.</p>
                <p class="anim-target"><a href="animate.html#Animatable">Animatable</a>: yes.</p></dd>

          <dt><span class="adef">Navigation Attributes</span></dt>
          <dd><p>See <a href="interact.html#specifyingnavigation">definition</a>.</p></dd>

      </dl>
    </div>
    <p>If an odd number of coordinates is provided in the <a href="shapes.html#PolygonElementPointsAttribute"><span class="attr-name">'points'</span></a>
      attribute, then it is treated as an <a href="intro.html#TermUnsupportedValue"><span class="svg-term">unsupported value</span></a>.
    </p>
    <p>A <a href="shapes.html#PolygonElement"><span class="element-name">'polygon'</span></a> element must be rendered in a way that produces the
    same result as if the following
    <a href="paths.html">path</a> were specified instead:</p>
    <ol>
      <li>Perform an absolute <a href="paths.html#PathDataMovetoCommands">moveto</a> operation
      to the first coordinate pair in the list of points.</li>
      <li>For each subsequent coordinate pair, perform an absolute
      <a href="paths.html#PathDataLinetoCommands">lineto</a>
      operation to that coordinate pair.</li>
      <li>Perform a <a href="paths.html#PathDataClosePathCommand">closepath</a>
      command.</li>
    </ol>
    <p id="ExamplePolygon01"><span class="example-ref">Example 09_07</span> below
    specifies two polygons (a star and a hexagon) in the
    <a href="intro.html#TermUserCoordinateSystem"><span class="svg-term">user coordinate system</span></a> established by the <a href="coords.html#ViewBoxAttribute"><span class="attr-name">'viewBox'</span></a> attribute on the <a href="struct.html#SVGElement"><span class="element-name">'svg'</span></a> element.</p>
      <div class="example"><div class="exampleheader"><strong>Example:</strong> <a href="examples/09_07.svg">09_07.svg</a></div><div class="examplesource"><pre>&lt;?xml version="1.0"?&gt;
&lt;svg width="12cm" height="4cm" viewBox="0 0 1200 400"
     xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny"&gt;
  &lt;desc&gt;Example polygon01 - star and hexagon&lt;/desc&gt;
  &lt;!-- Show outline of canvas using 'rect' element --&gt;
  &lt;rect x="1" y="1" width="1198" height="398"
        fill="none" stroke="blue" stroke-width="2" /&gt;
  &lt;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" /&gt;
  &lt;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" /&gt;
&lt;/svg&gt;
</pre></div><div class="exampleimage"><img alt="Rendering of 09_07.svg" src="examples/09_07.png" /></div></div>
    <h3 id="PointsBNF">9.7.1 The grammar for points specifications in <span class="element-name">'polyline'</span> and <span class="element-name">'polygon'</span> elements</h3>
    <p>The following is an EBNF grammar for <span class="attr-value">&lt;points-data&gt;</span>
    values on <span class="element-name">'polyline'</span>
    and <span class="element-name">'polygon'</span> elements [<a href="refs.html#ref-EBNF">EBNF</a>]:</p>
<pre>
points-data:
    wsp* coordinate-pairs? wsp*
coordinate-pairs:
    coordinate-pair
    | coordinate-pair comma-wsp coordinate-pairs
coordinate-pair:
    coordinate comma-wsp coordinate
coordinate:
    number
number:
    sign? integer-constant
    | sign? floating-point-constant
comma-wsp:
    (wsp+ comma? wsp*) | (comma wsp*)
comma:
    ","
integer-constant:
    digit-sequence
floating-point-constant:
    fractional-constant exponent?
    | digit-sequence exponent
fractional-constant:
    digit-sequence? "." digit-sequence
    | digit-sequence "."
exponent:
    ( "e" | "E" ) sign? digit-sequence
sign:
    "+" | "-"
digit-sequence:
    digit
    | digit digit-sequence
digit:
    "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9"
wsp:
    (#x20 | #x9 | #xD | #xA)+
</pre>

  
<div class="footer">
  SVG Tiny 1.2 – 20081222
  <ul>
    <li><a href="index.html">Top</a></li>
    <li><a href="expanded-toc.html">Contents</a></li>
    <li><a href="paths.html">Previous</a></li>
    <li><a href="text.html">Next</a></li>
    <li><a href="elementTable.html">Elements</a></li>
    <li><a href="attributeTable.html">Attributes</a></li>
  </ul>
</div>

</body>
</html>