SVG/Základní tvary

Úvod

SVG obsahuje následující sadu základních tvarových elementů:

• 'rect' (rectangle = obdélník, včetně nastavení zaoblených rohů, takže můžete vytvořit i ovál)
• 'circle' (circle = kruh, kružnice)
• 'ellipse' (ellipse = elipsa)
• 'line' (line = prostá čára)
• 'polyline' (polyline = lomená čára)
• 'polygone' (polygone = mnohoúhelník)

Matematicky jsou tyto tvarové elementy obdobou elementu 'path', tímto elementem lze vytvořit naprosto stejné tvary. Základní tvary mohou mít obrys, výplň a používat je jako střih. Všechny vlastnosti dostupné pro elementy 'path' můžou být použity na základní tvary.

Element 'rect'

Element 'rect' vymezuje obdélník, který je zarovnaný k ose vámi používaného souřadného systému. Zaobleného obdélníku dosáhnete nastavením příslušných hodnot atributů rx a ry.

 <!ENTITY % SVG.rect.extra.content "" >
 <!ENTITY % SVG.rect.element "INCLUDE" >
 <![%SVG.rect.element;[
 <!ENTITY % SVG.rect.content
    "(( %SVG.Description.class; )*, ( %SVG.Animation.class;
        %SVG.rect.extra.content; )*)"
 >
 <!ELEMENT %SVG.rect.qname; %SVG.rect.content; >
 <!-- end of SVG.rect.element -->]]>
 <!ENTITY % SVG.rect.attlist "INCLUDE" >
 <![%SVG.rect.attlist;[
 <!ATTLIST %SVG.rect.qname;
    %SVG.Core.attrib;
    %SVG.Conditional.attrib;
    %SVG.Style.attrib;
    %SVG.Paint.attrib;
    %SVG.Color.attrib;
    %SVG.Opacity.attrib;
    %SVG.Graphics.attrib;
    %SVG.Clip.attrib;
    %SVG.Mask.attrib;
    %SVG.Filter.attrib;
    %SVG.GraphicalEvents.attrib;
    %SVG.Cursor.attrib;
    %SVG.External.attrib;
    x %Coordinate.datatype; #IMPLIED
    y %Coordinate.datatype; #IMPLIED
    width %Length.datatype; #REQUIRED
    height %Length.datatype; #REQUIRED
    rx %Length.datatype; #IMPLIED
    ry %Length.datatype; #IMPLIED
    transform %TransformList.datatype; #IMPLIED
 >

Definice atributů:
x="<souřadnicová délka>"

Souřadnice osy x je z té strany, která má menší hodnotu ve vašem souřadnicovém systému. Když není atribut zadán, projeví se jako by byl nastaven na hodnotu "0".

Animovatelnost: ano.

y="<souřadnicová délka>"

Souřadnice osy y je z té strany, která má menší hodnotu ve vašem souřadnicovém systému. Když není atribut zadán, projeví se jako by byl nastaven na hodnotu "0".

Animovatelnost: ano.

width="<délka>"

Atribut width nám definuje délku strany obdélníku – šířku. Záporné hodnoty jsou chybné (viz Error processing). Hodnota "0" zamezuje renderování elementu.

Animovatelnost: ano.

height="<délka>"

Atribut height nám definuje délku strany obdélníku – výšku. Záporné hodnoty jsou chybné (viz Error processing). Hodnota "0" zamezuje renderování elementu.

Animovatelnost: ano.

rx="<délka>"

Atribut pro zaoblený obdélník, hodnota rx nám specifikuje délku poloosy elipsy ve směru osy x. Záporné hodnoty jsou chybné (viz Error processing). Podívejte se níž do poznámek, co se stane, když není tento atribut určen.

Animovatelnost: ano.

ry="<length>"

Atribut pro zaoblený obdélník, hodnota ry nám specifikuje délku poloosy elipsy ve směru osy y. Záporné hodnoty jsou chybné (viz Error processing). Podívejte se níž do poznámek, co se stane, když není tento atribut určen.

Animovatelnost: ano.

Když je řádně specifikována hodnota rx a není specifikována hodnota ry, pak je hodnota ry brána jako rovna rx (rx = ry).

Když je řádně specifikována hodnota ry a není specifikována hodnota rx, pak je hodnota rx brána jako rovna ry (ry = rx).

Když není řádně specifikována hodnota rx ani hodnota ry, pak má obdélník ostře lomené strany.

Když je hodnota rx větší než jedna polovina šířky (v ose x), pak se projeví tato hodnota, jako by byla nastavena hodnota poloviny délky strany obdélníka.

Když je hodnota ry větší než jedna polovina výšky (v ose y), pak se projeví tato hodnota, jako by byla nastavena hodnota poloviny délky strany obdélníka.

Matematicky je element 'rect' nahraditelný elementem 'path', což lze udělat následovně: všechny souřadnicové body a délky obdélníku se převedou do vašeho souřadnicového systému, viz též Jednotky

Příklad:

 <?xml version="1.0" standalone="no"?>
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
   "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
  <svg width="10cm" height="6cm" viewBox="0 0 1000 600"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
   <desc>Příklad - zaoblený obdélník</desc>
   <!-- Ukáže rámeček zobrazované plochy s využitím elementu 'rect' -->
   <rect x="2" y="3" width="994" height="594"
        fill="none" stroke="purple" stroke-width="3" />
   <rect x="100" y="100" width="300" height="400" rx="100"
        fill="none" stroke="red" stroke-width="14" />
   <g transform="translate(500 210) rotate(-30)">
     <rect x="0" y="0" width="300" height="400" rx="50"
          fill="orange" stroke="yellow" stroke-width="7" />
   </g>
  </svg>

Element 'circle'

Element 'circle' definuje kruh na základě jeho středového bodu a jeho poloměru.

 <!ENTITY % SVG.circle.extra.content "" >
 <!ENTITY % SVG.circle.element "INCLUDE" >
 <![%SVG.circle.element;[
 <!ENTITY % SVG.circle.content
    "(( %SVG.Description.class; )*, ( %SVG.Animation.class;
        %SVG.circle.extra.content; )*)"
 >
 <!ELEMENT %SVG.circle.qname; %SVG.circle.content; >
 <!-- end of SVG.circle.element -->]]>
 <!ENTITY % SVG.circle.attlist "INCLUDE" >
 <![%SVG.circle.attlist;[
 <!ATTLIST %SVG.circle.qname;
    %SVG.Core.attrib;
    %SVG.Conditional.attrib;
    %SVG.Style.attrib;
    %SVG.Paint.attrib;
    %SVG.Color.attrib;
    %SVG.Opacity.attrib;
    %SVG.Graphics.attrib;
    %SVG.Clip.attrib;
    %SVG.Mask.attrib;
    %SVG.Filter.attrib;
    %SVG.GraphicalEvents.attrib;
    %SVG.Cursor.attrib;
    %SVG.External.attrib;
    cx %Coordinate.datatype; #IMPLIED
    cy %Coordinate.datatype; #IMPLIED
    r %Length.datatype; #REQUIRED
    transform %TransformList.datatype; #IMPLIED
 >

Externí odkazy

• W3.org
• Zvon.org