Search code examples
svgcode-reusereusability

reusable parameters/ variables for svg graphic

For a study project I'm asked to write an easy customizable svg graphic.

Is there any concept of variables?

The best I came up with so far is the following:

<g id="box">
    <rect x="0" y="0" width="25" height="20" rx="3" ry="3" style="fill:transparent;stroke-width:1;stroke:rgb(0,0,0)">       
</g>

<g id="month">
    <!-- first row -->
    <g transform="translate(50 40)">
        <use xlink:href='#box'/>
        <text x="5" y="15" fill="grey">Monday</text>
    </g>
    <g transform="translate(75 40)">
        <use xlink:href='#box'/>
        <text x="5" y="15" fill="grey">Tuesday</text>
    </g>
    <g transform="translate(100 40)">
        <use xlink:href='#box'/>
        <text x="5" y="15" fill="grey">Wednesday</text>
    </g>
    <g transform="translate(125 40)">
        <use xlink:href='#box'/>
        <text x="5" y="15" fill="grey">Thursday</text>
    </g>
    <g transform="translate(150 40)">
        <use xlink:href='#box'/>
        <text x="5" y="15" fill="grey">Friday</text>
    </g>
    <g transform="translate(175 40)">
        <use xlink:href='#box'/>
        <text x="5" y="15" fill="grey">Saturday</text>
    </g>
    <g transform="translate(200 40)">
        <use xlink:href='#box'/>
        <text x="5" y="15" fill="grey">Sunday</text>
    </g>
    ....
</g>

Now the problem is, that if I change the the width of the box I need to adjust the translate parameter for each element in the month group.

Would be great to have something like this:

<param name="box-height" value="20" />
<param name="box-width" value="25" />

<g id="box">
        <rect x="0" y="0" width="box-width" height="box-height" rx="3" ry="3" style="fill:transparent;stroke-width:1;stroke:rgb(0,0,0)">        
    </g>

    <g id="month">
        <!-- first row -->
        <g transform="translate(2*box-width 40)">
            <use xlink:href='#box'/>
            <text x="5" y="15" fill="grey">Monday</text>
        </g>
        <g transform="translate(3*box-width 40)">
            <use xlink:href='#box'/>
            <text x="5" y="15" fill="grey">Tuesday</text>
        </g>
...
    </g>

But I didnt find anything so far. Does something like this exist, or any other helpful ideas. Thank you.

Solution

  • The answer is no.

    Parameters have been suggested in the past, and have even had draft specs written, but haven't made it to any implementation of SVG AFAIK.

    However you can create and manipulate SVG elements with Javascript. You can use plain old JS, or one of the specialty libraries like d3 or Raphaels.