SVG: об использовании <defs> и <use> с переменными текстовыми значениями

У меня есть следующий исходный код SVG, который генерирует несколько ящиков с текстами:

Как вы можете видеть, я три раза повторял <g></g>, чтобы получить три таких поля, когда SVG имеет элементы <defs> и <use>, которые позволяют повторно использовать элементы, используя ссылки id, вместо того, чтобы повторять их определения. Что-то вроде:

К сожалению, я не могу сделать это с помощью первого SVG-кода, так как мне нужно, чтобы тексты были разными для каждого окна, в то время как тег <use> просто дублирует 100%, что определено в <defs>.

Есть ли способ использовать <defs> и <use> с каким-то механизмом параметров/аргументов, например вызовами функций?

Ответы

Ответ 1

Мне не известно, как это сделать с текущей рекомендацией svg.

Но есть рабочий проект для модуля svg 2.0, см. SVG Ссылаемые переменные параметров. Пример с цветами - именно то, что вы ищете, я полагаю! Но тогда вам, вероятно, придется ждать до июня 2010 года или даже дольше, пока это рекомендация W3C и не будет поддержана клиентами, которые я предполагаю.

Теперь вы, вероятно, можете решить это с помощью скриптов.

Ответ 2

Я искал ответ на свой вопрос SVG. Ваш вопрос помог мне решить мой ответ, поэтому я отвечаю на ваши вопросы.

.... Читайте внимательно ваш вопрос. Включенные образцы кода TWOp >

Пример №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>