Cursos para compartir lo que sabes 3.284 cursos gratis
6.263.460 alumnos
6.263.460 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 | |
|---|---|---|---|---|
|
MySQL básico. Bases de datos y software libre (cuarta parte) Curso de informática sobre MySQL básico incluida la instalación, configuración y descarga de MySQL. En esta cuarta parte de nuestro curso sobre Bases de datos y software ... [30/10/08] |
|
442 | ||
|
Cómo eliminar los ojos rojos con PhotoShop En esta práctica conoceremos los pasos necesarios para poder eliminar los ojos rojos de una fotografía.... [26/05/08] |
|
2.155 |
 
|
|
|
Google AdWords. Atraer clientes con marketing online Atraer al cliente tiene, en el marketing online y a google como su más poderosa herramienta, las mejores posibilidades para una empresa. Las empresas, ca... [31/07/09] |
|
535 |
|
|
Publicar en 
del.icio.us 
digg 
meneame
