<?xml version="1.0" encoding="iso-8859-1"?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta name="GENERATOR" content="amaya 6.4+, 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" summary="toc">
  <tbody>
    <tr>
      <td><img alt="W3C" src="../../images/w3c_home" /> <img alt="Amaya"
        src="../../images/amaya.gif" /></td>
      <td><p><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>Hecho</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. 
    <p></p>
  </li>
  <li>Para crear un círculo o una elipse, seleccionad 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. 
    <p></p>
  </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 el marcado
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">Editing Mathematics</a></li>
  <li><a
    href="../editing_mathematics/the_math_palette_and_the_types.html.es">La
    paleta Matemáticas y el menú Xml &gt; Matemáticas</a></li>
</ul>

<p>&nbsp;</p>
</div>
</body>
</html>
