Podemos crear nuestras propias figuras para incluirlas
como imagen de fondo. Vemos aquí un ejemplo en el que hemos creado una figura
como imagen de fondo.
El código para crear la figura se pone dentro de la etiqueta
pattern .
En la figura de relleno hemos puesto primero un rectángulo del mismo tamaño de la imagen para rellenar el
fondo. Seguimos después con un círculo que colocamos en el centro, y ponemos
luego mediante una ruta (path ) las líneas que unen los círculos.
El código para la figura que vemos aquí a la derecha es el siguiente.
<svg width="270" height="200">
<defs>
<pattern id="patron2" x="0" y="0" width="30" height="30"
patternUnits="userSpaceOnUse" viewBox="0 0 100 100">
<rect x="0" y="0" width="100" height="100" fill="#ceedff"/>
<circle cx="50" cy="50" r="38"
stroke="#990099" stroke-width="2" fill="#ffb6b7"/>
<path d="M 50,0 L 50,10 M 50,90 L 50,100 M 0,50 L 10,50 M 90,50 L 100,50 z"
stroke="#990099" stroke-width="2" fill-opacity="0"/>
</pattern>
</defs>
<ellipse cx="135" cy="100" rx="120" ry="90"
stroke="#663366" stroke-width="5" fill="url(#patron2)"
</svg>
Marcadores
Un marcador es un pequeño dibujo o símbolo que puede introducirse en los vértices de algunas figuras,
concretamente en líneas, polilíneas, polígonos y rutas, y también al principio y final de las mismas.
Para incluir un marcador en una de estas figuras lo haremos de manera parecida a los patrones. Primero
dentro de un elemento defs creamos la figura con la etiqueta marker y después la incluimos en el
elemento mediante una serie de atributos.
Uno de los usos más corrientes de los marcadores es hacer puntas de flecha para líneas y otros elementos.
Haremos aquí un ejemplo de una línea con una punta de flecha a la vez que vamos explicando su funcionamiento.
Utilizaremos la etiqueta <marker> ... </marker> , dentro de esta etiqueta dibujaremos
mediante una ruta (path ) el triángulo de la punta de flecha. En primer lugar ponemos la etiqueta SVG y dentro de ella
una etiqueta defs donde irá el marcador:
<svg width="250" height="100" >
Seguimos con la etiqueta marker , la cual tiene
los siguientes atributos:
<marker id="flecha" markerWidth="10" markerHeight="6">
Los atributos markerWidth y markerHeight indican el ancho y el alto de la caja
que contiene el dibujo a insertar (en este caso el triángulo de punta de flecha).
Debemos poner también el atributo id para poder referirnos luego a este marcador desde
el elemento en que lo insertamos.
Debemos indicar también el punto, dentro de esta caja que coincidirá con el vértice, o final de
línea en este caso, para ello ponemos los atributos refX y refY (coordenadas "x" e "y"
respecto a la caja creada anteriormente)
<marker id="flecha" markerWidth="10" markerHeight="6" refX="5" refY="3">
El atributo orient indica el ángulo que tomará el marcador. Como valor podemos poner un número, que será el
número de grados que gire, o también la palabra "auto" que lo alineará con el principio o final de línea, o
si el marcador está en un vértice lo pone en un ángulo que será la media entre las dos lineas.
Por último el atributo markerUnits puede tomar los valores UserSpaceOnUse que toma como unidad
de medida para la caja del marcador la que tiene el SVG (normalmente el pixel), o strokeWidth , que toma como unidad de medida
el grosor de la línea (por ejemplo si la línea mide 3px -stroke-width="3" -, el tamaño de la caja se multiplica por 3).
<marker id="flecha" markerWidth="10" markerHeight="6" refX="5" refY="3
orient="auto" markerUnits="strokeWidth" >
Después dentro de la etiqueta marker insertamos el elemento que hará de punta de flecha, para ello hacemos una
ruta que dibuja un triángulo
<path d="M 0 3 L 10 0 L 10 6 z" fill="blue">
Cerramos la etiqueta "marker" y también la etiqueta defs :
</marker>
Nos falta dibujar la línea en la que insertaremos el marcador. Para insertar un
marcador en un elemento (linea, polígono, ruta, etc) usaremos en ese elemento los siguientes atributos:
marker-start : inserta el marcador al principio del elementomarker-mid : inserta el marcador en todas las esquinas que hay en medio del elementomarker-end : inserta el marcador al final del elemento
Como valor de estos atributos pondremos una referencia al elemento de la forma
"url(#id_marcador)" donde id marcador es el valor que le hemos dado
al atributo id de la etiqueta marker.
Dibujamos la línea con el marcador con el siguiente código
<line x1="10" y1="90" x2="220" y2="10"
Por último sólo nos queda cerrar la etiqueta svg para completar el dibujo.
</svg>
La figura nos quedará como hemos visto en el dibujo de arriba a la derecha.
Hemos hecho otro ejemplo, en el que añadimos una imagen en los
puntos de intersección de una polilínea.
Aprovechamos el marcador hecho en el SVG anterior para ponerlo
al final de la línea.
Para poner todas las imágenes en horizontal en el marcador hemos
puesto el atributo orient="0" , y para controlar que la imagen
tenga el tamaño que se indica en markerWidth y markerHeight
hemos puesto un viewBox con el tamaño de la imagen.
El resultado es el que ves aquí a la derecha, y el código que hemos
empleado es el siguiente:
<svg width="270" height="200">
<defs>
<marker id="stop" markerWidth="10" markerHeight="10"
refX="25" refY="25"
orient="0" markerUnits="strokeWidth"
viewBox="0 0 50 50">
<image xlink:href="../objetos/stop.gif" x="0" y="0" width="50" height="50"
</marker>
</defs>
<polyline points="0,5 70,30 50,120 160,30 110,110 230,180 200,50"
stroke="blue" stroke-width="3" fill-opacity="0"
marker-mid="url(#stop)" marker-end="url(#flecha)" />
</svg>
Aquí hemos utilizado también el marcador que hemos hecho en el ejemplo anterior. Esto es
posible porque están los dos en la misma página. De no ser así deberíamos haber incluido
dentro de la etiqueta defs los dos marcadores.
En la siguiente página veremos otro elemento imprescindible para poder hacer
gráficos SVG con una cierta calidad, las transformaciones
Transformaciones
RSS. Suscribir canal. 
