ASP en castellano. SVG / JavaScript asp y asp.net

SVG: Geometría

Rectángulo

Círculo

Elipse

Línea

Polilínea

Polígono

Texto

Caminos

SVG: Geometría

Rectángulo

<svg xmlns="http://www.w3.org/2000/svg" width="200px" height="200px">
  <rect x="25" y="25" width="100" height="100" fill="blue" opacity="0.5" />
  <rect x="50" y="50" rx="20" ry="20" width="100" height="100" fill="red"
    opacity="0.5" />
  <rect x="75" y="75" width="100" height="100" fill="green" opacity="0.5" />
</svg>

"x" e "y". Desplazamiento del objeto respecto al origen de coordenadas. "width" y "height". Ancho y alto del objeto. "rx" y "ry". Redondean las esquinas del objeto. El resto de atributos añaden propiedades sobre el estilo de la visualización.

Círculo

<svg xmlns="http://www.w3.org/2000/svg" width="200px" height="200px">
  <circle cx="100px" cy="100px" r="50px"
    style="fill:red; stroke:black; stroke-width:0.1cm" transform="translate(-20,20)" />
  <circle cx="100px" cy="100px" r="50px"
    style="fill:green; stroke:black; stroke-width:0.1cm" transform="translate(10,-20)"/>
  <circle cx="100px" cy="100px" r="50px"
    style="fill:blue; stroke:black; stroke-width:0.1cm" transform="translate(40,40)" />
</svg>

"cx" e "cy". Desplazamiento del objeto respecto al origen de coordenadas el cual indica el centro del objeto. "r". Radio del objeto. El resto de atributos añaden propiedades sobre el estilo de la visualización.

Elipse

<svg xmlns="http://www.w3.org/2000/svg" width="200px" height="200px">
  <ellipse cx="96.5" cy="143" rx="59.5" ry="41"
    style="fill:rgb(255,229,242); stroke:rgb(242,0,125); stroke-width:3"/>
</svg>

"cx" y "cy". Desplazamiento del objeto respecto al origen de coordenadas el cual indica el centro del objeto. "rx" y "ry". Definen el radio horizontal y vertical de la elipse.

Línea

<svg xmlns="http://www.w3.org/2000/svg" width="200px" height="200px">
  <line x1="10" y1="10" x2="150" y2="150" stroke="red" stroke-width="2" />
</svg>

"x1" y "y1". Coordenadas del inicio de la línea. "x2" y "y2". Coordenadas del fin de la línea.

La continuidad de las líneas pude ser modificada gracias al atributo de estilo "stroke-dasharray". Con este atributo podemos definir la línea como una sucesión de tramos visibles e invisibles. El atributo "stroke-dasharray" permite definir una lista de números separados por comas de forma que por parejas nos marcan la continuidad de la línea.

<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
  "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg" width="200px" height="200px">
  <line x1="10" y1="10" x2="150" y2="150" stroke="red"
    stroke-width="8" stroke-dasharray="18, 4, 4, 18" />
</svg>

Polilínea

<svg xmlns="http://www.w3.org/2000/svg" width="300" height="100">
  <polyline
    points="0,0 0,20 40,20 40,0 80,0 80,20 120,20 120,0 160,0 160,20 200,20 200,0 240,0 240,20"
    style="stroke:red; stroke-width:2; fill:none;" transform="translate(20,20)" />
</svg>

Polígono

<svg xmlns="http://www.w3.org/2000/svg" width="150" height="200">
  <polygon points="100,0,50,174,0,128,0,0"
           style="stroke:none; stroke-width:1; stroke-opacity:1; fill:#d5fbfd; fill-opacity:1" />
</svg>

Texto

<svg xmlns="http://www.w3.org/2000/svg" width="150" height="200">
  <text style="font-size: 72; font-weight: 900; fill: yellow; stroke: black; stroke-width: 0.6">
    <tspan x="10" y="100">Texto en SVG</tspan>
  </text>
</svg>

También existe la posibilidad de introducir elemenos definidos en otros espacios de nombres como es XHTML. Así, podemos insertar pedazos de XHTML dentro del documento SVG. Este ejemplo no funciona con el plugin de Adobe, para visualizarlo utilizar el Mozilla.

<foreignObject x="82" y="100" width="40px" height="10px"
               requiredExtensions="http://example.com/SVGExtensions/EmbeddedXHTML">
  <html xmlns="http://www.w3.org/1999/xhtml">
    <span class="forobjpts">(100,100)</span>
  </html>
</foreignObject>

Caminos

Definición de un conjunto de líneas de forma encadenada y con diferentes formas.

Comandos disponibles para definir caminos:

M. Permite moverse a un punto determinado sin pintar ninguna línea.
L. Creación de una línea hasta la coordenada indicada.
H. Creación de una línea horizontal hasta la coordenada indicada.
V. Creación de una línea vertical hasta la coordenada indicada.
C. Creación de una línea curva hasta la coordenada indicada.
S. Creación de una línea curva suave (smooth) hasta la coordenada indicada.
Q. Creación de una línea curva cuadrática de Bezier hasta la coordenada indicada.
T. Creación de una línea curva suave cuadrática de Bezier hasta la coordenada indicada.
A. Creación de una línea elíptica hasta la coordenada indicada.
Z. Cerrar el comino.

Todos estos comandos tienen también su equivalente en minúsculas, de forma que el posicionamiento en este caso se considerará relativo y no absoluto.

<svg xmlns="http://www.w3.org/2000/svg" width="200px" height="200px">
  <path d="M10 10 h 100 v  30 h -100 v -30 Z" fill="blue" />
  <path d="M10 80 H 110 V 130 H   10 V  80 Z" fill="red" />
  <path d="M10 80 C 10 80 60 30 110 80 Z" fill="green" />
</svg>

<path d="M50,100 Q200,0 200,200 100,500 600,200" style="fill:none; stroke:blue; stroke-width:2" />

<path d="M 10 10 L 65 90 A 5 10 0 0 0 75 90" style="stroke: black; fill: #ffcccc" />

Debido a la complejidad de definir figuras geométricas basadas en caminos, se hace mucho más recomendable el uso de programas gráficos de edición para este menester.