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>

现在的问题是，如果我更改 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 等专业库之一。

svg 图形的可重用参数/变量

reusable parameters/ variables for svg graphic

svg

code-reuse

reusability