SVG：我可以将参数值传递给使用的元素吗？答案

【问题标题】：SVG: Can I pass a parameter value to a used element?SVG：我可以将参数值传递给使用的元素吗？
【发布时间】：2021-08-23 00:20:20
【问题描述】：

我还是 SVG 的新手，所以我不清楚术语。

是否只有 SVG 可以将参数值传递给 used 元素？例如，我在 g 元素中硬编码了文本 Name，但想将来自 use 元素的值传递给它。

目前我创建了没有文本的g 元素，并在use 之后放置了一些文本，但应该有更好的方法。

我在 Internet 上进行了广泛搜索，但找不到任何与此应用程序有关的最新信息。

有些人建议使用 JavaScript，但这不是一个通用的解决方案，因为我不一定要插入浏览器。

<svg width="160" viewBox="0 0 160 120">
    <defs>
        <g id="test">
            <rect width="60" height="40"/>
            <text x="8" y="24" stroke="none" fill="black">Name</text>
        </g>
    </defs>
    <use href="#test" x="00" y="20" fill="aqua" stroke="blue"/>
    <use href="#test" x="80" y="20" fill="orange" stroke="red"/>
    <text y="100">This space for rent</text>
</svg>

【问题讨论】：

这里有一些想法：stackoverflow.com/questions/1422238/…

标签： svg

【解决方案1】：

简短的回答是否。

您不能通过<use> 元素传递参数。最接近自定义使用参考的方法是从<use> 继承某些样式属性，例如颜色。如果不使用 Javascript，您当然无法自定义元素的实际内容。

【讨论】：

【解决方案2】：

我理解你的问题。

根据我的经验，您需要传递一些参数并像下面这样使用它

function generateSVG(width, hight){
    return `<svg viewBox='0 0 160 120'>` + 
           `<defs>`+
           ...
           `<rect width='${width}' height='${height}'` +
           ...
           `</svg>`;
}

现在你使用这个函数生成 svg。

generateSVG(60,40);

【讨论】：

【解决方案3】：

如果您创建自己的 Web 组件，则使用 JavaScript 是一种通用解决方案，所有现代浏览器都支持。

<svg-label fill=aqua stroke=blue>Hello Web</svg-label>
<svg-label fill=orange stroke=red>Components!</svg-label>

<script>
  customElements.define("svg-label", class extends HTMLElement {
    connectedCallback() {
      setTimeout(() => { // make sure inner DOM is parsed
        this.innerHTML = `<svg width="160" viewBox="0 0 160 120">
 <rect width="100%" height="40" x="0" y="0" 
       fill="${this.attributes.fill.value}" stroke="${this.attributes.stroke.value}"/>
 <text y="25%" x="8" stroke="none" fill="black">${this.innerHTML}</text>
</svg>`;
      });
    }
  })
</script>

【讨论】：

如果你不使用浏览器，我认为你不能依赖 JavaScript。
OPs 问题中没有提到该要求。我确实想知道他为什么想要 SVG？不用电脑就能在纸上打印的新玩具？
我是 OP，我不确定关于新玩具的评论是否完全有帮助。也没有提到对浏览器的要求。我想要一个仅 SVG 的解决方案，因为我计划将 SVG 嵌入到另一种技术中，而不是 Web 浏览器中。而且，是的，它甚至可以打印在纸上。

【解决方案4】：

不完全是您所追求的，但您可以对 used 元素进行一些更改，将其放在一个组中，然后在其顶部放置文本。

<svg width="160" viewBox="0 0 160 120">
    <defs>
        <g id="test">
            <rect width="60" height="40"/>
        </g>
    </defs>
    
    <g transform="translate(0,20)">
        <use href="#test" fill="aqua" stroke="blue" />
        <text x="10" y="25">Name</text>
    </g>
    <g transform="translate(80,20)">
        <use href="#test" fill="orange" stroke="red" />
        <text x="10" y="25">Other</text>
    </g>
    
    <text y="100">This space for rent</text>
</svg>

【讨论】：