SVG: Acerca del uso de <defs> y <use> con texto variable valora

Tengo el siguiente código fuente SVG que genera una serie de cuadros con los textos:SVG: Acerca del uso de <defs> y <use> con texto variable valora

<?xml version="1.0" encoding="UTF-8"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" 
     "http://www.w3.org/TR/2001/REC-SVG-20050904/DTD/svg11.dtd"> 
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="600" height="600"> 
    <defs> 
    </defs> 
    <title>Draw</title> 
    <g transform="translate(50,40)"> 
    <rect width="80" height="30" x="0" y="-20" style="stroke: black; stroke-opacity: 1; stroke-width: 1; fill: #9dc2de" /> 
    <text text-anchor="middle" x="40">Text</text> 
    </g> 
    <g transform="translate(150,40)"> 
    <rect width="80" height="30" x="0" y="-20" style="stroke: black; stroke-opacity: 1; stroke-width: 1; fill: #9dc2de" /> 
    <text text-anchor="middle" x="40">Text 2</text> 
    </g> 
    <g transform="translate(250,40)"> 
    <rect width="80" height="30" x="0" y="-20" style="stroke: black; stroke-opacity: 1; stroke-width: 1; fill: #9dc2de" /> 
    <text text-anchor="middle" x="40">Text 3</text> 
    </g> 
</svg>

Como se puede ver, he repetido los <g></g> tres veces para obtener tres de estos cuadros, cuando SVG tiene <defs> y <use> elementos que permiten reutilizar elementos utilizando referencias de Id. en lugar de repetir sus definiciones. Algo así como:

<?xml version="1.0" encoding="UTF-8"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" 
     "http://www.w3.org/TR/2001/REC-SVG-20050904/DTD/svg11.dtd"> 
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="600" height="600"> 
    <defs> 
    <marker style="overflow:visible;fill:inherit;stroke:inherit" 
      id="Arrow1Mend" refX="0.0" refY="0.0" orient="auto"> 
     <path transform="scale(0.4) rotate(180) translate(20,0)" 
      style="fill-rule:evenodd;stroke-width:2.0pt;marker-start:none;" 
      d="M 0.0,-15.0 L -20.5,0.0 L 0.0,15.0 "/> 
    </marker> 
     <line marker-end="url(#Arrow1Mend)" id="systemthread" x1="40" y1="10" x2="40" y2="410" style="stroke: black; stroke-dasharray: 5, 5; stroke-width: 1; "/> 
    </defs> 
    <title>Draw</title> 
    <use xlink:href="#systemthread" transform="translate(50,40)" /> 
    <use xlink:href="#systemthread" transform="translate(150,40)" /> 
    <use xlink:href="#systemthread" transform="translate(250,40)" /> 
</svg>

Por desgracia, no se puede hacer esto con el primer código SVG ya que necesito los textos a ser diferente para cada cuadro, mientras que la etiqueta <use> simplemente duplica el 100% de lo que está definido en <defs>.

¿Hay alguna manera de utilizar <defs> y <use> con algún tipo de mecanismo de parámetros/argumentos como las llamadas de función?

Fuente

2009-09-14 Lukman

puse una clase en la , a continuación, utiliza Javascript/jQuery para acceder a ese elemento por clase y manipular sus atributos. Funciona bien. –

No conozco una manera de lograr esto con la recomendación actual de svg.

Pero hay un borrador de trabajo para un módulo svg 2.0, ver: SVG Referenced Parameter Variables. ¡Supongo que el ejemplo con las flores es exactamente lo que estás buscando! Pero entonces probablemente tendrá que esperar hasta junio de 2010 o incluso más tiempo hasta que esta sea una recomendación del W3C y sea respaldada por clientes que asumo.

Por ahora, probablemente podría resolverlo con scripts.

Fuente

2009-09-15 05:44:52

aww Lástima que estoy por encima del estándar: P ... supongo que me limitaré a repetir los elementos dentro del documento svg ya que prefiero no utilizar scripts en svg a menos que sea absolutamente necesario. El documento svg será generado por backend php de todos modos ... – Lukman

Estaba buscando una respuesta a mi propia pregunta de SVG. Tu pregunta me ayudó a resolver mi respuesta, así que estoy respondiendo la tuya.

.... Lea su pregunta más de cerca. Incluye DOS muestras de código

Muestra n. ° 1. Cajas con texto

Muestra # 2. Flechas con el texto

Muestra 1

<html> 
    <svg xmlns="http://www.w3.org/2000/svg" 
     xmlns:xlink="http://www.w3.org/1999/xlink" 
     width="600" height="900"> 
    <defs> 
     <g id="my_box" 
     desc="my rectangle template"> 
     <rect width="80" height="30" x="0" y="-20" style="stroke: black; stroke-opacity: 1; stroke-width: 1; fill: #9dc2de" /> 
     </g> 
    </defs> 

    <g transform="translate(50 40)"> 
     <text text-anchor="middle" x="40"> This little box went to market </text> 
     <use xlink:href="#my_box" /> 
    </g> 

    <g transform="translate(150 140)"> 
     <use xlink:href="#my_box" /> 
     <text text-anchor="middle" x="40"> This little box stayed home </text> 
    </g> 

    <g transform="translate(250 240)"> 
     <use xlink:href="#my_box" /> 
     <text text-anchor="middle" x="40"> This little box had roast beef </text> 
    </g> 
    </svg> 

</html>

Nota en la muestra 1 que el orden de la caja y de texto son importantes.

Muestra 2

<html> 
    <svg xmlns="http://www.w3.org/2000/svg" 
     xmlns:xlink="http://www.w3.org/1999/xlink" 
     width="600" height="900"> 
    <defs> 
     <g id="arrow" 
     desc="arrow with a long dashed tail"> 

     <marker style="overflow:visible;fill:inherit;stroke:inherit" 
       id="Arrow1Mend" refX="0.0" refY="0.0" orient="auto"> 
     <path transform="scale(0.4) rotate(180) translate(20,0)" 
       style="fill-rule:evenodd;stroke-width:2.0pt;marker-start:none;" 
       d="M 0.0,-15.0 L -20.5,0.0 L 0.0,15.0 " 
       desc="The actual commands to draw the arrow head" 
     /> 
     </marker> 

     <line transform="translate(0 -450)" 
       marker-end="url(#Arrow1Mend)" 
       x1="40" y1="10" x2="40" y2="410" 
       style="stroke: black; stroke-dasharray: 5, 5; stroke-width: 1; " 
       desc="This is the tail of the 'arrow'" 
     /> 
     </g> 
    </defs> 

    <g transform="translate(100 450)"> 
     <text> Text BEFORE xlink </text> 
     <use xlink:href="#arrow" /> 
    </g> 

    <g transform="translate(200 550)"> 
     <use xlink:href="#arrow" /> 
     <text> More to say </text> 
    </g> 

    <g transform="translate(300 650)"> 
     <use xlink:href="#arrow" /> 
     <text> The last word </text> 
    </g> 

    <g transform="translate(400 750)"> 
     <use xlink:href="#arrow" /> 
     <text> Text AFTER xlink </text> 
    </g> 

    </svg> 
</html>

Fuente

2010-05-09 08:16:31 autotroph

+1, no pensé usar 'text' y' use' sin parámetros de posicionamiento. No es la solución óptima, pero (aún) tan buena como SVG puede hacer sin recurrir a scripts. –

SVG: Acerca del uso de <defs> y <use> con texto variable valora

Respuesta

Cuestiones relacionadas