XperimentoS

El lienzo SVG es infinito por cada una de las dimensiones del espacio, pero solo se puede visualizar una región rectangular finita de él. Esta región rectangular finita es llamada marco (viewport).

El tamaño del marco SVG (es decir, su ancho y alto) es determinado por un proceso de negociación entre el fragmento de documento SVG y sus parientes (reales o implícitos). Una vez que el proceso de negociación esta completado, se provee al agente  SVG de la siguiente información:

• Un número (normalmente entero) que representa el ancho en “pixels” del marco.
• Un número (normalmente entero) que representa el alto en “pixels” del marco.

Usando esta información, el agente SVG determina el marco, un sistema inicial de coordenadas para el marco y un sistema inicial de coordenadas de usuario de forma que los dos sistemas de coordenadas son idénticos. Ambos sistemas de coordenadas son establecidos de forma que encajan con el origen del marco (esquina izquierda superior), y una unidad en el sistema inicial de coordenadas es igual a un “píxel” en el marco. El sistema inicial de coordenadas es llamado también “viewport space” y el sistema inicial de coordenadas de usuario es llamado también “user space”.

La longitud en SVG puede ser especificada en: em, ex, px, pt, pc, cm, mm, in, y también en porcentajes.
Un nuevo “user space” (es decir, un nuevo sistema de coordenadas) puede ser establecido en cualquier lugar de un fragmento de documento SVG mediante la especificación de las matrices de transformación o simplemente mediante operaciones como la rotación, torsión, extensión y translación. Establecer un nuevo sistema de coordenadas usando transformaciones es una de la operaciones fundamentales en los gráficos 2D y el método más usual de controlar el tamaño y  la posición de los objetos gráficos.

También pueden establecerse nuevos marcos.  De esta forma se pueden redefinir el significado de las unidades de porcentaje y proveer una nueva referencia que ajuste un gráfico a un área rectangular determinada.

El sistema inicial de coordenadas

Fuera del elemento “svg”, el agente SVG determina el sistema de coordenadas inicial del marco y un sistema inicial de coordenadas de usuario de forma que los dos sistemas de coordenadas son idénticos. Ambos sistemas de coordenadas son establecidos de forma que encajan con el origen del marco (esquina izquierda superior), y una unidad en el sistema inicial de coordenadas es igual a un “píxel” en el marco.

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=”300px” height=”100px” version=”1.1″
     xmlns=”http://www.w3.org/2000/svg“>
  <desc>Example InitialCoords – SVG’s initial coordinate system</desc>

  <g fill=”none” stroke=”black” stroke-width=”3″ >
    <line x1=”0″ y1=”1.5″ x2=”300″ y2=”1.5″ />
    <line x1=”1.5″ y1=”0″ x2=”1.5″ y2=”100″ />
  </g>
  <g fill=”red” stroke=”none” >
    <rect x=”0″ y=”0″ width=”3″ height=”3″ />
    <rect x=”297″ y=”0″ width=”3″ height=”3″ />
    <rect x=”0″ y=”97″ width=”3″ height=”3″ />
  </g>
  <g font-size=”14″ font-family=”Verdana” >
    <text x=”10″ y=”20″>(0,0)</text>
    <text x=”240″ y=”20″>(300,0)</text>
    <text x=”10″ y=”90″>(0,100)</text>
  </g>
</svg>

Transformaciones del sistemas de coordenadas

Un nuevo “user space” (es decir, un nuevo sistema de coordenadas) puede ser establecido en cualquier lugar de un fragmento de documento SVG mediante la especificación de transformaciones en el atributo “transform” en un elemento contenedor (de grupo) o en los elementos gráficos o en un atributo “viewBox”  dentro de los elementos “svg”, “symbol”, “marker”, “pattern” y “view”.

Los atributos “transform” y “viewBox” transforman en el espacio de coordenadas de usuario y las longitudes de los atributos hermanos en los elementos dados y todos sus descendientes. Las transformaciones pueden ser anidadas, en cuyo caso el efecto final será el de las transformaciones acumuladas.

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=”400px” height=”150px” version=”1.1″
     xmlns=”http://www.w3.org/2000/svg“>
  <desc>Example OrigCoordSys – Simple transformations: original picture</desc>
  <g fill=”none” stroke=”black” stroke-width=”3″ >
    <!– Draw the axes of the original coordinate system –>
    <line x1=”0″ y1=”1.5″ x2=”400″ y2=”1.5″ />
    <line x1=”1.5″ y1=”0″ x2=”1.5″ y2=”150″ />
  </g>
  <g>
    <text x=”30″ y=”30″ font-size=”20″ font-family=”Verdana” >
      ABC (orig coord system)
    </text>
  </g>
</svg>

Transformaciones anidadas

Las transformaciones pueden ser anidadas con todos los niveles necesarios. El efecto final de las transformaciones anidadas es el de la concatenación de la secuencia de transformaciones. Matemáticamente consiste en la multiplicación de las matrices de transformación definidas.

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=”400px” height=”150px” version=”1.1″
     xmlns=”http://www.w3.org/2000/svg“>
  <desc>Example Nested – Nested transformations</desc>
  <g fill=”none” stroke=”black” stroke-width=”3″ >
    <!– Draw the axes of the original coordinate system –>
    <line x1=”0″ y1=”1.5″ x2=”400″ y2=”1.5″ />
    <line x1=”1.5″ y1=”0″ x2=”1.5″ y2=”150″ />
  </g>
  <!– First, a translate –>
  <g transform=”translate(50,90)”>
    <g fill=”none” stroke=”red” stroke-width=”3″ >
      <line x1=”0″ y1=”0″ x2=”50″ y2=”0″ />
      <line x1=”0″ y1=”0″ x2=”0″ y2=”50″ />
    </g>
    <text x=”0″ y=”0″ font-size=”16″ font-family=”Verdana” >
      ….Translate(1)
    </text>
    <!– Second, a rotate –>
    <g transform=”rotate(-45)”>
      <g fill=”none” stroke=”green” stroke-width=”3″ >
        <line x1=”0″ y1=”0″ x2=”50″ y2=”0″ />
        <line x1=”0″ y1=”0″ x2=”0″ y2=”50″ />
      </g>
      <text x=”0″ y=”0″ font-size=”16″ font-family=”Verdana” >
        ….Rotate(2)
      </text>
      <!– Third, another translate –>
      <g transform=”translate(130,160)”>
        <g fill=”none” stroke=”blue” stroke-width=”3″ >
          <line x1=”0″ y1=”0″ x2=”50″ y2=”0″ />
          <line x1=”0″ y1=”0″ x2=”0″ y2=”50″ />
        </g>
        <text x=”0″ y=”0″ font-size=”16″ font-family=”Verdana” >
          ….Translate(3)
        </text>
      </g>
    </g>
  </g>
</svg>

El atributo “transform”

El valor del atributo “tranform” es un <transform-list>, el cual se define como una lista de definiciones de transformación aplicada en el orden de aparición. Cada definición de una transformación individual es separada por un espacio en blanco y/o una coma. Los tipos disponibles transformaciones son:

• matrix(<a> <b> <c> <d> <e> <f>)
  Especifica una transformación a partir de una matriz de 6 valores. matrix(a,b,c,d,e,f) es equivalente a matrix [a b c d e f].
• translate(<tx> [<ty>])
  Especifica una translación en <tx> y <ty> unidades. Si <ty> no es especificado, es asumido que es 0.
• scale(<sx> [<sy>])
  Especifica una operación de cambio de escala en <sx> y <sy> unidades. Si <sy> no es especificado, es asumido que es 0.
• rotate(<rotate-angle> [<cx> <cy>])
  Especifica una rotación en <rotate-angle> grados sobre el punto dado. Los parámetros <cx> y <cy> son opcionales, si no son especificados se usara como punto de origen para la rotación el origen del actual sistema de coordenadas de usuario. La operación corresponde a la matriz: matrix [cos(a) sin(a) -sin(a) cos(a) 0 0].

Ejemplo (en todas las transformaciones todos los valores numéricos son reales): 

<g transform=”translate(-10,-20) scale(2) rotate(45) translate(5,10)”>
  <!– graphics elements go here –>
</g>

Que es funcionalmente equivalente a:

<g transform=”translate(-10,-20)”>
  <g transform=”scale(2)”>
    <g transform=”rotate(45)”>
      <g transform=”translate(5,10)”>
        <!– graphics elements go here –>
      </g>
    </g>
  </g>
</g>