SVG重用组但改变填充颜色

Question

所以我有一个<g>元素,<rect>s里面有一些,它们都有相同的填充颜色,但可以有不同的大小.我想重用它<g>,但用不同的颜色填充它,是否可能？

我可以以任何我喜欢的方式更改标记.

Answer 1

您可以使用<defs>如下定义rect组:

<defs>
    <g id="rect-group">
        <rect x="0" y="0" width="60" height="30"/>
        <rect x="20" y="10" width="20" height="50"/>
    </g>
</defs>

然后你可以多次使用这个组,transform如果你愿意,可以把它放在不同的地方:

<g class="group-1" transform="translate(10.5,20.5)">
    <use xlink:href="#rect-group" />
</g>

<g class="group-2" transform="translate(55.5,32.5)">
    <use xlink:href="#rect-group" />
</g>

您可以直接设置这些组的样式,或者为它们提供不同的类,并根据需要使用CSS进行样式设置:

  <style> 
    .group-1{
        fill: red;
        stroke: white;
    }
    .group-2{
        fill: blue;
        stroke: black;
    }
  </style>

有关示例,请参阅:http://dl.dropbox.com/u/169269/rect_group.svg