SVG：変数テキストで<defs>と<use>の使用については、私はテキストとボックスの数を生成、次のSVGのソースコードを持って

値：あなたが見ることができるようにSVG：変数テキストで<defs>と<use>の使用については、私はテキストとボックスの数を生成、次のSVGのソースコードを持って

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

を、私が取得する<g></g> 3回繰り返し、 SVGが<defs>と<use>の要素を持ち、その定義を繰り返す代わりにid参照を使って要素を再利用できる要素が3つあります。ような何か：<use>タグは単に<defs>で定義されているものは100％を複製しながら、私は、テキストが各ボックスに異なるする必要があるため

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

は、残念ながら、私は最初のSVGコードでこれを行うことはできません。

<defs>と<use>には、関数呼び出しのような何らかのパラメータ/引数のメカニズムがありますか？

出典

2009-09-14 Lukman

私はクラスでその項目にアクセスし、その属性を操作するためのJavascript/jQueryのを使用し、その後、上のクラスを置きます。正常に動作します。 –

現在のsvgの推奨でこれを達成する方法は私には分かりません。

しかし、svg 2.0モジュールの作業草案は、SVG Referenced Parameter Variablesを参照してください。花のある例はまさに私が想像しているものです！しかし、おそらく2010年6月まで待たなければならないかもしれません。これはW3C勧告であり、私が想定しているクライアントがサポートするまで待つ必要があります。

今のところ、スクリプトで解決できる可能性があります。

出典

2009-09-15 05:44:52

あああまりにも私は標準よりも前になっている：P ..私はsvgドキュメント内の要素を繰り返すことに固執するだろうと思う。なぜなら、絶対に必要な場合を除き、svgでスクリプトを使用したくないからだ。 svg文書はPHPバックエンドによって生成されます... – Lukman

私自身のSVG質問への回答を探していました。あなたの質問は私の答えを解決するのを助けたので、私はあなたに答えています。

....ご質問をより詳しくお読みください。 2つのコードサンプルを含む

サンプル＃1。テキスト付きボックス

サンプル＃2。サンプル1のテキスト

サンプル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>

注意と矢印はボックスとテキストの順序が重要であること。

サンプル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>

出典

2010-05-09 08:16:31 autotroph

+1、私は 'text'と' use'を位置決めパラメータなしで使うとは思わなかった。これは最適な解決策ではありませんが、（まだ）SVGほどスクリプティングに頼らずに実現できます。 –

SVG：変数テキストで<defs>と<use>の使用については、私はテキストとボックスの数を生成、次のSVGのソースコードを持って

答えて

関連する問題