XperimentoS

SVG contiene el siguiente conjunto de elementos de formas básicas:

• rectángulos (rectangles), incluidos los rectángulos de esquinas redondeadas.
• círculos (circles)
• elipses (ellipses)
• líneas (lines)
• polilineas (polylines)
• polígonos (polygons)

Matemáticamente, estas formas son equivalentes a un elemento “path” que podría contruir la misma forma. Las formas básicas pueden tener diferentes trazos, rellenos y ser usadas como caminos de corte (clip paths). Todas las propiedades disponibles en los elementos “path” pueden ser también aplicadas en las formas básicas.

El elemento “rect”

El elemento “rect” define un rectángulo con su eje alineado con el actual sistema de coordenadas. Los rectángulos redondeados pueden ser también obtenidos ajustando los atributos “rx” y “ry”.

Atributos:

• x = “<coordinate>”
  La coordenada del eje x del lado del rectángulo, el cual tiene el menor valor para la coordenada x en el actual sistema de coordenadas. Si el atributo no es especificado, el efecto es como su tuviera un 0.
• y = “<coordinate>”
  La coordenada del eje y del lado del rectángulo, el cual tiene el menor valor para la coordenada y en el actual sistema de coordenadas. Si el atributo no es especificado, el efecto es como su tuviera un 0.
• width = “<length>”
  La anchura del rectángulo. Un valor negativo producirá un error. Un valor igual a 0 deshabilitara la visualización del elemento.
• height = “<length>”
  La altura del rectángulo. Un valor negativo producirá un error. Un valor igual a 0 deshabilitara la visualización del elemento.

Ejemplo:

<?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=”12cm” height=”4cm” viewBox=”0 0 1200 400″
     xmlns=”http://www.w3.org/2000/svg” version=”1.1″>
  <desc>Example rect01 – rectangle with sharp corners</desc>
  <!– Show outline of canvas using ‘rect’ element –>
  <rect x=”1″ y=”1″ width=”1198″ height=”398″
        fill=”none” stroke=”blue” stroke-width=”2″/>
  <rect x=”400″ y=”100″ width=”400″ height=”200″
        fill=”yellow” stroke=”navy” stroke-width=”10″  />
</svg>

El elemento “circle”

El elemento “circle” define un círculo basado en un punto central y un radio.

Atributos:

• cx = “<coordinate>”
  La coordenada del eje x del centro del circulo. Si el atributo no es especificado, el efecto es como su tuviera un 0.
• cy = “<coordinate>”
  La coordenada del eje y del centro del circulo. Si el atributo no es especificado, el efecto es como su tuviera un 0.
• r = “<length>”
  El radio del círculo. The radius of the circle. Un valor negativo producirá un error. Un valor igual a 0 deshabilitara la visualización del elemento. 

Ejemplo:

<?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=”12cm” height=”4cm” viewBox=”0 0 1200 400″
     xmlns=”http://www.w3.org/2000/svg” version=”1.1″>
  <desc>Example circle01 – circle filled with red and stroked with blue</desc>
  <!– Show outline of canvas using ‘rect’ element –>
  <rect x=”1″ y=”1″ width=”1198″ height=”398″
        fill=”none” stroke=”blue” stroke-width=”2″/>
  <circle cx=”600″ cy=”200″ r=”100″
        fill=”red” stroke=”blue” stroke-width=”10″  />
</svg>

El elemento “line”

El elemento “line” define un segmento de línea que empieza en un punto y termina en otro.

Atributos:

• x1 = “<coordinate>”
  La coordenada del eje x del principio de la línea. Si el atributo no es especificado, el efecto es como su tuviera un 0.
• y1 = “<coordinate>”
  La coordenada del eje y del principio de la línea. Si el atributo no es especificado, el efecto es como su tuviera un 0.
• x2 = “<coordinate>”
  La coordenada del eje x del final de la línea. Si el atributo no es especificado, el efecto es como su tuviera un 0.
• y2 = “<coordinate>”
  La coordenada del eje y del final de la línea. Si el atributo no es especificado, el efecto es como su tuviera un 0.

Ejemplo:

<?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=”12cm” height=”4cm” viewBox=”0 0 1200 400″
     xmlns=”http://www.w3.org/2000/svg” version=”1.1″>
  <desc>Example line01 – lines expressed in user coordinates</desc>
  <!– Show outline of canvas using ‘rect’ element –>
  <rect x=”1″ y=”1″ width=”1198″ height=”398″
        fill=”none” stroke=”blue” stroke-width=”2″ />
  <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>
</svg>