SVG: O użyciu <defs> i <use> ze zmiennym tekstem wartości

Mam następujący kod źródłowy SVG, który generuje liczby pól z tekstów:SVG: O użyciu <defs> i <use> ze zmiennym tekstem wartości

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

Jak widać, I powtórzył <g></g> trzy razy, aby dostać trzy takie skrzynki, gdy SVG ma elementy <defs> i <use>, które umożliwiają ponowne wykorzystanie elementów wykorzystujących referencje id zamiast powtarzania ich definicji. Coś jak:

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

Niestety nie mogę tego zrobić z pierwszego kodu SVG ponieważ muszę teksty być różne dla każdego pola, natomiast tag <use> prostu powiela 100%, co jest zdefiniowane w <defs>.

Czy istnieje sposób użycia <defs> i <use> z jakimś mechanizmem parametrów/argumentów, takich jak wywołania funkcji?

Źródło

2009-09-14 Lukman

umieścić klasę na , a następnie wykorzystywane JavaScript/jQuery, aby uzyskać dostęp do tego elementu przez klasy i manipulować jego atrybuty. Działa w porządku. –

Nie jest mi znany sposób osiągnięcia tego przy obecnym zaleceniu svg.

Ale istnieje wersja robocza dla modułu svg 2.0, patrz: SVG Referenced Parameter Variables. Przykład z kwiatami jest dokładnie tym, czego szukasz! Ale prawdopodobnie będziesz musiał poczekać do czerwca 2010 r. Lub dłużej, dopóki nie otrzymasz rekomendacji W3C i popartych przez klientów.

Na razie można prawdopodobnie rozwiązać go za pomocą skryptów.

Źródło

2009-09-15 05:44:52

Aww szkoda, że wyprzedzam standard: P .. Myślę, że po prostu będę trzymać się powtórzeń elementów wewnątrz dokumentu svg, ponieważ wolałbym nie używać skryptów w svg, chyba że jest to absolutnie konieczne. Dokument svg zostanie wygenerowany przez backend php i tak ... – Lukman

Szukałem odpowiedzi na własne pytanie dotyczące SVG. Twoje pytanie pomogło mi rozwiązać moją odpowiedź, więc odpowiadam na twoje.

.... Przeczytaj uważnie swoje pytanie. W zestawie znajdują się dwie próbki kodu:

Próbka nr 1. Pola z tekstem

Próbka nr 2. Strzałki z tekstem

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

notatkę w próbce 1, że kolejność polu i tekst są ważne.

Próbka 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>

Źródło

2010-05-09 08:16:31 autotroph

+1, nie myślałem, aby używać "text" i "use" bez parametrów pozycjonowania. Nie jest to optymalne rozwiązanie, ale (nadal) tak dobre, jak SVG, bez użycia skryptów. –

SVG: O użyciu <defs> i <use> ze zmiennym tekstem wartości

Odpowiedz

Powiązane problemy