многоразовые параметры/переменные для графика svg

Question

Для учебного проекта меня попросят написать простой настраиваемый графический файл svg.

Есть ли какое-либо понятие переменных?

Лучшее, что я придумал до сих пор является следующее:

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

Теперь проблема в том, что если я изменю в width в box мне нужно настроить перевод параметр для каждого элемента в month группа.

Было бы здорово иметь что-то вроде этого:

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

Но я не нашел ничего до сих пор. Что-то вроде этого существует или какие-то другие полезные идеи. Спасибо.

Answer 1

Ответ отрицательный.

В прошлом были предложены параметры и даже были написаны черновики, но они не попали ни в какую реализацию SVG AFAIK.

Однако вы можете создавать и управлять элементами SVG с помощью Javascript. Вы можете использовать простой старый JS или одну из специальностей, таких как d3 или Raphaels.