svg graphic的可重用參數/變量

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> 

現在的問題是，如果我改變box的的width我需要調整轉換參數中的每個元素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的實現。

但是，您可以使用Javascript創建和操作SVG元素。你可以使用普通的老JS，或者像d3或Raphaels這樣的專業庫。