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

[英]reusable parameters/ variables for svg graphic


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

对于一个研究项目,我被要求编写一个易于定制的svg图形。

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.

现在的问题是,如果我改变盒子的宽度,我需要调整月份组中每个元素的translate参数。

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.

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

1 个解决方案

#1


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.

过去已经提出过参数,甚至已经编写了草案规范,但没有对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.

但是,您可以使用Javascript创建和操作SVG元素。您可以使用普通的旧JS或d3或Raphaels等专业库之一。

智能推荐

注意!

本站翻译的文章,版权归属于本站,未经许可禁止转摘,转摘请注明本文地址:http://www.itdaan.com/blog/2015/05/06/54cefc516dd7331afff08610de550d6d.html



 
© 2014-2019 ITdaan.com 粤ICP备14056181号  

赞助商广告