<?xml version="1.0" encoding="iso-8859-1"?>


<html xmlns="http://www.w3.org/1999/xhtml">


<head>


  <meta name="GENERATOR"


  content="amaya 8.0-pre, see http://www.w3.org/Amaya/" />


  <title>Crear gráficos con la paleta</title>


  <link href="../style.css" rel="stylesheet" type="text/css" />


</head>





<body xml:lang="es" lang="es">





<table border="0" width="100%" summary="toc">


  <tbody>


    <tr>


      <td><img alt="W3C" src="../../images/w3c_home" /> <img alt="Amaya"


        src="../../images/amaya.gif" /></td>


      <td><p align="right"><a href="working_with_graphics.html.es"


        accesskey="p"><img alt="anterior" src="../../images/left.gif" /></a>


        <a href="../SVG.html.es" accesskey="t"><img alt="superior"


        src="../../images/up.gif" /></a> <a href="moving_graphics.html.es"


        accesskey="n"><img alt="siguiente" src="../../images/right.gif"


        /></a></p>


      </td>


    </tr>


  </tbody>


</table>





<div id="page_body">


<h1>Crear gráficos con la paleta</h1>





<p>Para crear un nuevo elemento SVG en un documento, sitúa el punto de


inserción en el lugar en el que quieres insertarlo y haz clic en el botón


<strong>Gráficos</strong>. El botón <strong>Gráficos</strong> (<img


src="../../images/Graph.gif" alt="Botón Gráficos" />) muestra una paleta que


permanece en la pantalla hasta que haces clic en el botón


<strong>Aceptar</strong> de la paleta.</p>





<p>Los elementos gráficos disponibles son:</p>


<ul>


  <li>La línea, <code>line</code> en SVG, <svg


         xmlns="http://www.w3.org/2000/svg" width="2cm" height="0.6cm">


      <line y1="3px" x1="0px" x2="17px" y2="20px" style="stroke: #B20000"


            stroke="1"/>


    </svg>


  </li>


  <li>El rectángulo, <code>rect</code> en SVG sin atributos <code>rx</code> o


    <code>ry</code>, <svg xmlns="http://www.w3.org/2000/svg" width="2cm"


         height="0.6cm">


      <rect x="6px" width="22px" height="18px"


            style="fill: #FFCB69; stroke: #0071FF" stroke="1"/>


    </svg>


  </li>


  <li>El rectángulo de esquinas redondeadas, <code>rect</code> en SVG, <svg


         xmlns="http://www.w3.org/2000/svg" width="2cm" height="0.6cm">


      <rect rx="6px" stroke="1" width="23px" height="18px"


            style="fill: #E5E500; stroke: #4C00E5"/>


    </svg>


  </li>


  <li>El círculo, <code>circle</code> en SVG, <svg


         xmlns="http://www.w3.org/2000/svg" width="2cm" height="0.6cm">


      <circle cy="10px" cx="12px" r="10px"


              style="fill: #C1FFE9; stroke: #FF0000" stroke="1"/>


    </svg>


  </li>


  <li>La elipse, <code>ellipse</code> en SVG, <svg


         xmlns="http://www.w3.org/2000/svg" width="2cm" height="0.6cm">


      <ellipse cy="10px" cx="20px" rx="15px" ry="10px" style="fill: #B795FF"


            stroke="1"/>


    </svg>


  </li>


  <li>La polilínea, <code>polyline</code> en SVG,<svg


         xmlns="http://www.w3.org/2000/svg" width="2cm" height="0.6cm">


      <polyline points="0,16 19,0 33,16 51,6" transform="translate(4,0)"


                stroke="1" style="stroke: #0000B2; fill: #FFA069"/>


    </svg>


  </li>


  <li>El polígono, <code>polygon</code> en SVG, <svg


         xmlns="http://www.w3.org/2000/svg" width="2cm" height="0.7cm">


      <polygon points="0,16 13,0 26,12 43,4 44,16 15,16 12,11"


               transform="translate(2,0)" stroke="1"


               style="fill: #C8FF95; stroke: #000000"/>


    </svg>


  </li>


  <li>La curva abierta, <code>path</code> en SVG,<svg


         xmlns="http://www.w3.org/2000/svg" width="2cm" height="0.6cm">


      <path stroke="blue" fill="none"


            d="M 0,16 C 0,15 4,6 9,7 C 13,7 12,16 16,16 C 20,15 24,1 22,0"


            style="stroke: #0071FF" stroke-width="2px"/>


    </svg>


  </li>


  <li>La curva cerrada, <code>path</code> en SVG, <svg


         xmlns="http://www.w3.org/2000/svg" width="2cm" height="0.6cm">


      <path stroke="black" fill="none"


            d="M 14,4 C 11,4 8,0 6,1 C 3,1 1,4 1,7 C 0,9 2,12 5,14 C 7,15 13,14 16,14 C 17,13 21,12 23,11 C 24,9 29,7 29,4 C 28,1 24,0 22,0 C 19,0 16,3 14,4 Z"


            style="fill: #FFE9C1; stroke: #B20000"/>


    </svg>


  </li>


</ul>


<ul>


  <li>El fragmento HTML incrustado, <code>foreignObject</code> en SVG,<svg


         xmlns="http://www.w3.org/2000/svg" width="7cm" height="45px">


      <rect y="0" x="27px" width="200px" height="45px" style="fill: #C1FFFF"


            stroke="1"/>


      <foreignObject width="200px" y="0" x="20px">





        <div xmlns="http://www.w3.org/1999/xhtml">


        <ul>


          <li>Primer elemento</li>


          <li>Segundo elemento</li>


        </ul>


        </div>


      </foreignObject>


    </svg>


  </li>


  <li>El texto SVG, <code>text</code> en SVG<svg


         xmlns="http://www.w3.org/2000/svg" width="9.5cm" height="1.2cm">


      <text y="33px" x="13px"


            style="font-family: helvetica; font-size: 12pt; fill: #0000B2">Una


        cadena de caracteres en SVG


      </text>


    </svg>


  </li>


</ul>





<h2>Elegir una forma en la paleta</h2>





<p>Al seleccionar una forma en la paleta, si la selección está en la


estructura HTML del documento, Amaya crea un nuevo elemento SVG justo al


principio de la selección actual e inserta la forma elegida en este nuevo


SVG. Amaya genera los dibujos SVG como bloques, entre párrafos. Para mostrar


un dibujo en línea, debes crearlo entre párrafos y editar el código fuente


para desplazarlo.</p>





<p>Cuando el elemento seleccionado es un elemento SVG, la nueva forma se


añade al dibujo SVG actual. La nueva forma se añade después y puede solaparse


con el resto de formas.</p>





<p>La creación de una forma se hace directamente:</p>


<ul>


  <li>Para crear un rectángulo, elige primero la posición de la esquina


    izquierda apretando el botón izquierdo del ratón. manteniendo pulsado el


    botón, mueve el ratón a la posición de la esquina opuesta y suelta el


    botón. La forma ya está definida.


    


  </li>


  <li>Para crear un círculo o una elipse, selecciona primero la posición del


    centro pulsando el botón izquierdo del ratón. Manteniendo pulsado el


    botón, mueve el ratón hacia la derecha y/o hacia abajo y acontinuación,


    suelta el ratón. La forma ya está definida.


    


  </li>


  <li>Para crear una polilínea o un polígono, crea cada punto haciendo clic


    en la posición correspondiente con el botón izquierdo del ratón. Para


    indicar el último punto, haz clic con el botón central o derecho.</li>


</ul>





<h2>Insertar una imagen</h2>





<p>Puedes insertar una imagen en un dibujo SVG. Elige el comando de menú


<strong>XHTML &gt; Imagen</strong> o haz clic en el botón <strong>Insertar


imagen</strong> de la barra de botones y sigue los mismos pasos que en


HTML.</p>





<p>para insertar una expresión matemática en un dibujo SVG, haz clic en la


paleta <strong>Math</strong> cuando la selección está en un SVG. Amaya


generará una etiqueta <code>foreignObject</code> para incrustar las marcas


MathML.</p>





<h2>Ver también:</h2>


<ul>


  <li><a href="working_with_graphics.html.es">Trabajar con gráficos</a></li>


  <li><a href="../Math.html.es">Editar Matemáticas</a></li>


  <li><a


    href="../editing_mathematics/the_math_palette_and_the_types.html.es">La


    paleta MathML y el menú XML &gt;  MathML</a></li>


</ul>





<p>&nbsp;</p>


</div>


</body>


</html>


