SVG：关于使用带有可变文本值的 <defs> 和 <use>答案

【问题标题】：SVG: About using <defs> and <use> with variable text valuesSVG：关于使用带有可变文本值的 <defs> 和 <use>
【发布时间】：2010-11-28 04:17:02
【问题描述】：

我有以下 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>

如您所见，当 SVG 具有 <defs> 和 <use> 元素时，我重复了 <g></g> 三次以获得三个这样的框，它们允许使用 id 引用重用元素而不是重复它们的定义。比如：

<?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> 与函数调用等某种参数/参数机制一起使用？

【问题讨论】：

我在上放了一个类，然后使用 Javascript/Jquery 按类访问该项目并操作其属性。工作正常。

标签： svg

【解决方案1】：

我正在寻找我自己的 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>

【讨论】：

+1，我没想过在没有定位参数的情况下使用text 和use。这不是最佳解决方案，但（仍然）与 SVG 一样好，无需借助脚本。

【解决方案2】：

我不知道使用当前 svg 推荐实现此目的的方法。

但是有一个 svg 2.0 模块的工作草案，请参阅：SVG Referenced Parameter Variables。我想花的例子正是你要找的！但是，您可能必须等到 2010 年 6 月或更长时间，直到这是 W3C 的建议并得到我假设的客户的支持。

现在你可能可以用脚本来解决它。

【讨论】：

aww 太糟糕了，我领先于标准：P .. 我想我会坚持重复 svg 文档中的元素，因为我不想在 svg 中使用脚本，除非如果绝对有必要。无论如何，svg 文档将由 php 后端生成...
@räph 你有我如何通过脚本和使用元素来解决这个问题的例子吗？我能想出脚本解决方案的唯一方法是重复整个元素而不是 <use> 标签