Question

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

我可以按照自己喜欢的方式更改标记。

Answer 1

您可以使用<defs>来定义矩形组，如下所示：

<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

SVG重用组但改变填充颜色

1 个答案: