Identifícate o Regístrate

Autor: Ricardo Borillo
Curso: 4,43/5 (35 opiniones) |4393 alumnos|Fecha publicación: 15/09/2004

DESC y TITLE.- Son dos elementos que no tiene ningun tipo de representación gráfica. Sólo se utilizan para la documentación y especificación del documento SVG. Cualquier contenedor o elemento gráfico dentro del documento puede definir su propio título y descripción.

Symbol.-  Este elemento permite definir patrones de objeto gráfico para después poder instanciarlos con un USE. Mediante SYMBOL conseguimos reutilizar elementos que se declaran de forma reiterativa dentro del documento y así mejoras la legibilidad y la semántica del documento SVG.

USE.-  Cualquier elemento gráfico de tipo SYMBOL, G, USE u otros elementos pueden potencialmente ser considerados como patrones y ser susceptibles de reutilizarse mediante la utilización de USE.

<svg width="10cm" height="3cm" viewBox="0 0 100 30" xmlns="http://www.w3.org/2000/svg "
     xmlns:xlink="http://www.w3.org/1999/xlink ">
  <defs>
    <rect id="MyRect" width="60" height="10"/>
  </defs>
  <rect x="0.1" y="0.1" width="99.8" height="29.8" fill="none" stroke="blue" stroke-width="0.2" />
  <use x="20" y="10" xlink:href="#MyRect" />
</svg>

Figure 13. elemento-use-1.svg

<svg width="10cm" height="3cm" viewBox="0 0 100 30" xmlns="http://www.w3.org/2000/svg "
     xmlns:xlink="http://www.w3.org/1999/xlink ">
  <defs>
    <symbol id="MySymbol" viewBox="0 0 20 20">
      <desc>MySymbol - four rectangles in a grid</desc>
      <rect x="1" y="1" width="8" height="8"/>
      <rect x="11" y="1" width="8" height="8"/>
      <rect x="1" y="11" width="8" height="8"/>
      <rect x="11" y="11" width="8" height="8"/>
    </symbol>
  </defs>

  <rect x="0.1" y="0.1" width="99.8" height="29.8" fill="none" stroke="blue" stroke-width="0.2" />
  <use x="45" y="10" width="10" height="10" xlink:href="#MySymbol" />
</svg>

Figure 14. elemento-use-2.svg

<svg width="10cm" height="3cm" viewBox="0 0 100 30" xmlns="http://www.w3.org/2000/svg "
     xmlns:xlink="http://www.w3.org/1999/xlink ">
  <defs>
    <rect id="MyRect" x="0" y="0" width="60" height="10"/>
  </defs>
  <rect x="0.1" y="0.1" width="99.8" height="29.8" fill="none" stroke="blue" stroke-width="0.2" />
  <use xlink:href="#MyRect" transform="translate(20,2.5) rotate(10)" />
</svg>

Figure 15. elemento-use-3.svg

<svg width="12cm" height="3cm" viewBox="0 0 1200 300" xmlns="http://www.w3.org/2000/svg "
     xmlns:xlink="http://www.w3.org/1999/xlink ">
  <defs style="stroke-miterlimit: 10">
    <path id="MyPath" d="M300,50 900,50 900,250 300,250" class="MyPathClass"
          style="stroke-dasharray:300,100" />
  </defs>
 
  <style type="text/css">
  <![CDATA[
     #MyUse { fill: blue }
     #MyPath { stroke: red }
     use { fill-opacity: .5 }
     path { stroke-opacity: .5 }
     .MyUseClass { stroke-linecap: round }
     .MyPathClass { stroke-linejoin: bevel }
     use > path { shape-rendering: optimizeQuality }
     g > path { visibility: hidden }
  ]]>
  </style>
 
  <g style="stroke-width:40">
    <use id="MyUse" xlink:href="#MyPath" class="MyUseClass" style="stroke-dashoffset:50" />
  </g>
</svg>

Figure 16. elemento-use-4.svg

Image.-  Este elemento permite la inclusión de imágenes externas rasterizadas en el área definida por las coordenadas de se adjuntan.

<svg width="200" height="200" version="1.1"
xmlns="http://www.w3.org/2000/svg " xmlns:xlink="http://www.w3.org/1999/xlink ">
  <image x="50" y="50" width="100px" height="100px" xlink:href="modele33.jpg">
    <title>My image</title>
  </image>
</svg>

Figure 17. elemento-image.svg

Transformaciones.- Permiten realizar cambios de coordenadas sobre los elementos representados. Sobre cualquier objeto dentro de un documento SVG podermos realizar las siguientes transformaciones:

Escalado: utilizado para la redimensión o para el cambio de orientación.

Traslación: cambiar la ubicación actual de un elemento, cambiando asi el origen de coordenadas.

Rotación: giro en grados que debe realizar el elemento con respecto al origen de coordenadas.

<svg width="140" height="170">
  <circle cx="70" cy="95" r="50" style="stroke: black; fill: none;" />
  <circle cx="55" cy="80" r="5" stroke="black" fill="#339933" />
  <circle cx="85" cy="80" r="5" stroke="black" fill="#339933" />
 
  <g id="whiskers">
    <line x1="75" y1="95" x2="135" y2="85" style="stroke: black;" />
    <line x1="75" y1="95" x2="135" y2="105" style="stroke: black;" />
  </g>
  <use xlink:href="#whiskers" transform="scale(-1 1) translate(-140 0)" />
</svg>

Figure 18. transformacion-gato.svg

<svg width="200" height="200">
  <defs>
    <g id="base">
      <circle cx="80" cy="80" r="30" style="stroke: black; fill: none;" />
    </g>
  </defs>
 
  <g transform="translate(50, 10)">
    <use xlink:href="#base" transform="rotate(10)" />
    <use xlink:href="#base" transform="rotate(12)" />
    <use xlink:href="#base" transform="rotate(14)" />
    <use xlink:href="#base" transform="rotate(16)" />
    <use xlink:href="#base" transform="rotate(18)" />
    <use xlink:href="#base" transform="rotate(20)" />
    <use xlink:href="#base" transform="rotate(22)" />
    <use xlink:href="#base" transform="rotate(24)" />
    <use xlink:href="#base" transform="rotate(26)" />
    <use xlink:href="#base" transform="rotate(28)" />
  </g>
</svg>

Figure 19. transformacion-circulos.svg

Recibe nuestras novedades

Recibir

Al presionar "Recibir" estás dándote de alta y aceptas las condiciones legales de mailxmail