एसवीजी: <defs> और <use> का उपयोग कर चर पाठ के साथ के बारे में बहुत महत्व

मैं है निम्नलिखित एसवीजी स्रोत कोड है कि पाठ के साथ बक्से के एक नंबर उत्पन्न करता है:एसवीजी: <defs> और <use> का उपयोग कर चर पाठ के साथ के बारे में बहुत महत्व

<?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> तीन बार दोहराया पाने के लिए ऐसे तीन बक्से, जब एसवीजी में <defs> और <use> तत्व हैं जो उनकी परिभाषाओं को दोहराने के बजाय आईडी संदर्भों का उपयोग करके तत्वों का पुन: उपयोग करने की अनुमति देते हैं। की तरह कुछ:

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

दुर्भाग्य से मैं के बाद से मैं ग्रंथों की जरूरत प्रत्येक बॉक्स के लिए अलग होने की पहले एसवीजी कोड के साथ ऐसा नहीं कर सकते, जबकि <use> टैग बस 100% क्या <defs> में परिभाषित किया गया है डुप्लिकेट।

क्या <defs> और <use> का उपयोग करने का कोई तरीका है फ़ंक्शन कॉल जैसे किसी प्रकार के पैरामीटर/तर्क तंत्र के साथ?

स्रोत

2009-09-14 Lukman

मैं पर एक वर्ग के शब्दों में कहें, तो वर्ग करके उस आइटम के लिए उपयोग और उसके गुण हेरफेर करने के लिए जावास्क्रिप्ट/jQuery का इस्तेमाल किया। ठीक काम करता है। –

वर्तमान svg अनुशंसा के साथ इसे प्राप्त करने का एक तरीका मुझे ज्ञात नहीं है।

लेकिन एक svg 2.0 मॉड्यूल के लिए एक वर्किंग ड्राफ्ट है, देखें: SVG Referenced Parameter Variables। फूलों के साथ उदाहरण वही है जो आप ढूंढ रहे हैं मुझे लगता है! लेकिन फिर आपको शायद जून 2010 या उससे भी अधिक तक इंतजार करना पड़ेगा जब तक यह एक डब्ल्यू 3 सी सिफारिश नहीं है और मुझे लगता है कि ग्राहकों द्वारा समर्थित है।

अब के लिए आप शायद इसे स्क्रिप्टिंग के साथ हल कर सकते हैं।

स्रोत

2009-09-15 05:44:52

ओह बहुत बुरा मैं मानक से आगे हूं: पी .. मुझे लगता है कि मैं बस svg दस्तावेज़ के अंदर तत्वों को दोहराने के लिए चिपकूँगा क्योंकि मैं पूरी तरह से जरूरी होने तक svg में स्क्रिप्टिंग का उपयोग नहीं करना चाहूंगा। Svg दस्तावेज़ php बैकएंड द्वारा उत्पन्न किया जाएगा ... – Lukman

मैं अपने स्वयं के एसवीजी प्रश्न का उत्तर खोज रहा था। आपके प्रश्न ने मुझे अपना जवाब हल करने में मदद की, इसलिए मैं तुम्हारा जवाब दे रहा हूं।

.... अपना प्रश्न अधिक बारीकी से पढ़ें। दो कोड नमूने शामिल

नमूना # 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, मैंने कोई टेक्स्टिंग पैराम के साथ 'टेक्स्ट' और' उपयोग 'का उपयोग नहीं किया था। यह इष्टतम समाधान नहीं है, लेकिन (अभी भी) एसवीजी के रूप में अच्छा है स्क्रिप्टिंग का उपयोग किए बिना कर सकते हैं। –

एसवीजी: <defs> और <use> का उपयोग कर चर पाठ के साथ के बारे में बहुत महत्व

उत्तर

संबंधित मुद्दे