SVG: Informazioni sull'uso <defs> e <use> con testo variabile Valori

Ho il seguente codice sorgente SVG che genera un numero di caselle con i testi:SVG: Informazioni sull'uso <defs> e <use> con testo variabile Valori

<?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>

Come potete vedere, ho ripetuto le <g></g> tre volte per ottenere tre di questi riquadri, quando SVG ha elementi <defs> e <use> che consentono di riutilizzare gli elementi utilizzando riferimenti ID invece di ripetere le loro definizioni. Qualcosa di simile:

<?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>

purtroppo non posso fare questo con il primo codice SVG da quando ho bisogno i testi di essere diverso per ogni scatola, mentre il tag <use> duplica semplicemente al 100% ciò che è definito in <defs>.

C'è un modo per utilizzare <defs> e <use> con qualche tipo di meccanismo parametri/argomenti come le chiamate di funzione?

fonte

2009-09-14 Lukman

ho messo una classe sul , quindi utilizzato Javascript/jQuery per accedere a tale voce per classe e manipolare i suoi attributi. Funziona bene. –

Un modo per ottenere questo con l'attuale raccomandazione svg non è noto a me.

Ma esiste una bozza di lavoro per un modulo svg 2.0, vedere: SVG Referenced Parameter Variables. L'esempio con i fiori è esattamente quello che stai cercando, suppongo! Ma probabilmente dovrai attendere fino a giugno 2010 o anche più a lungo fino a quando non si tratta di una raccomandazione del W3C e supportata dai clienti.

Per ora probabilmente è possibile risolverlo con lo scripting.

fonte

2009-09-15 05:44:52

aww too bad sono avanti rispetto allo standard: P .. credo che mi limiterò a ripetere gli elementi all'interno del documento svg dal momento che preferirei non utilizzare lo scripting in svg a meno che non sia assolutamente necessario. Il documento svg sarà generato dal backend php in ogni caso ... – Lukman

Stavo cercando una risposta alla mia domanda SVG. La tua domanda mi ha aiutato a risolvere la mia risposta, quindi rispondo alle tue.

.... Leggi la tua domanda più da vicino. Esempi di codice TWO inclusi

Campione n. Scatole con testo

Esempio n. Frecce con testo

Esempio 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 nel campione 1 che l'ordine della casella di testo e sono importanti.

Esempio 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>

fonte

2010-05-09 08:16:31 autotroph

+1, non ho pensato di usare 'text' e' use' senza parametri di posizionamento. Non è la soluzione ottimale, ma (ancora) valida come SVG può fare senza ricorrere allo scripting. –

SVG: Informazioni sull'uso <defs> e <use> con testo variabile Valori

risposta

Problemi correlati