在使用 <g> tag 创建并与 一起使用的 svg 组件中更改文本<use>可以吗？

Question

我想在SVG中创建一个可以重复使用的组件。这绘制了一个带有文本的矩形：

    <g id='TestComponent'>
        <rect x='200' y='235' width='100' height='30' rx='10' style='fill: white; stroke: lightgrey;'/>
        <text x='250' y='252' text-anchor='middle' alignment-baseline='middle' style='fill:black;font-family: Helvetica'>Test</text>
    </g>

如果我在容器'g'元素之间定义它： 测试

我可以这样使用：

    <use xlink:href='#TestComponent' />

，我也可以将其移动并重复使用：

    <use xlink:href='#TestComponent' x=100 y=100 />

这是我的问题，我希望能够更改文本。那可能吗？我想做的是：

    <use xlink:href='#TestComponent' text="Hello world 2"/>

有办法做到这一点吗？如果不是这样，那么构造这种事情的首选方法是什么，以便我可以尽可能地恢复和避免重复？

/hans

Answer 1

您可以使用XSLT或JavaScript。您的需求无法通过提供现成的盒子来满足您的要求。

Answer 2

是的，您可以在SVG中重复使用参数化结构。查看描述和示例：www.w3.org或www.schepers.cc。