Question

I want to create a component in svg that I can reuse.
This draws a rectangle with a text in it:

    <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>

If I define it between the container ‘g’ element:

Test

I can then use it like this:

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

And I can also move it and reuse it with:

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

Here’s my problem, I want to be able to change the text. Is that possible?
What I would like to do is something like:

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

Is there a way to do this?
If it’s not, what is the prefered way for structuring this kind of thing so I can resuse and avoid duplication as much as possible?

/Hans

Answer 1

You could use XSLT or javascript. Your requirements are not met by what <use> provides out-of-the-box.