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的{{1}}，我需要调整box组中每个元素的翻译参数。

拥有这样的东西会很棒：

month

但到目前为止我还没找到任何东西。这样的事情是存在的，还是任何其他有用的想法。谢谢。

Answer 1

答案是否定的。

过去已经提出了参数，甚至已经编写了草案规范，但还没有对SVG AFAIK的任何实现进行过。

但是，您可以使用Javascript创建和操作SVG元素。您可以使用普通的旧JS，或者像d3或Raphaels这样的专业库。

svg graphic

1 个答案: