Cursos para compartir lo que sabes 3.201 cursos gratis
6.233.243 alumnos
6.233.243 alumnos
Continuamos hablando de las aplicaciones del SVG en la geometría.
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>
Figure 6. polilinea.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>
Figure 7. poligono.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>
Figure 8. texto.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>
Figure 9. caminos.svg
<path d="M50,100 Q200,0 200,200 100,500 600,200" style="fill:none; stroke:blue; stroke-width:2" />
Figure 10. camino-bezier.svg
<path d="M 10 10 L 65 90 A 5 10 0 0 0 75 90" style="stroke: black; fill: #ffcccc" />
Figure 11. camino-elipse.svg
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.
Hay 35 opiniones. Opina sobre este curso.
| Cursos | Valoración | Alumnos | Vídeo | |
|---|---|---|---|---|
|
Cómo vender en Internet: introducción al e-Commerce Con este curso gratis le descubrimos el camino básico para introducir su comercio en el mayor mercado que existe: el mundo entero. La llegada del comercio electrónico ha ... [21/11/01] |
 |
40.287 | ||
|
Curso práctico sonido Los motivos que hacen que esta publicación se encuentre en tus manos son de carácter práctico, se pretende que sepas conectar equipos de sonido cuando no haya un especial... [14/07/06] |
 |
9.142 | ||
|
Generar archivos PDF con imágenes Con este curso queremos que descubras todas las dudas sobre las imágenes en Latex. Este tipo de imágenes acostumbran a traer dificultades a la hora de pasarlas a un archi... [16/10/06] |
 |
2.822 | ||
Publicar en 
del.icio.us 
digg 
meneame
