SVG: حول استخدام و <استخدام> مع القيم النص متغير

StackOverflow https://stackoverflow.com/questions/1422238

  •  07-07-2019
  •  | 
  •  

سؤال

ولدي شفرة المصدر 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> ثلاث مرات للحصول على ثلاثة من هذه الصناديق، وعندما يكون SVG <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>

للأسف لا أستطيع أن أفعل هذا مع رمز SVG الأولى منذ أنا في حاجة إلى النصوص أن تكون مختلفة لكل مربع، في حين أن العلامة <use> التكرارات ببساطة 100٪ ما هو محدد في <defs>.

هل هناك أي طريقة لاستخدام <defs> و<use> مع بعض نوع من المعلمات / الحجج آلية مثل المكالمات وظيفة؟

هل كانت مفيدة؟

المحلول

وهناك طريقة لتحقيق ذلك مع توصية SVG الحالية ليست معروفة بالنسبة لي.

ولكن هناك مشروع عمل لوحدة نمطية SVG 2.0 راجع: المتغيرات SVG مرجعي معلمة . على سبيل المثال مع الزهور هناك هو بالضبط ما كنت تبحث عن أفترض! ولكن بعد ذلك ربما لديك إلى الانتظار حتى يونيو 2010 أو حتى لفترة أطول حتى هذا هو توصية W3C وبدعم من قبل عملاء أفترض.

لوالآن هل يمكن ربما حلها مع البرمجة.

نصائح أخرى

وكنت تبحث عن إجابة لبلدي السؤال SVG. سؤالك ساعدني حل جوابي، لذلك أنا الإجابة لك.

و.... اقرأ سؤالك عن كثب. وشملت اثنين من نماذج التعليمات البرمجية

وعينة # 1. مربعات مع النص

وعينة رقم 2. السهام مع النص

وعينة 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>

ملحوظة في عينة 1 أن ترتيب مربع النص ومهمة.

ونموذج 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>
مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top