Question

我的目标是让第一组3个方格为蓝色，下一组3个方格为红色。为了最小化代码，我想利用SVG中的分组。所有矩形都保持蓝色。我已经在第二个组元素和use元素上尝试了内联样式，但这并没有解决问题。感谢您的帮助..以下是代码：

<svg width="1000" height="800" 
xmlns="http://www.w3.org/2000/svg" version="1.1"
xmlns:xlink="http://www.w3.org/1999/xlink">

<style>
.blue {fill:blue;}
.red {fill:red;}
</style>

<g id="g1" class="blue">
    <rect x="0" y="0" width="100" height="100" />
    <rect x="0" y="105" width="100" height="100" />
    <rect x="0" y="210" width="100" height="100" />
</g>

<g class="red">
<use xlink:href="#g1" transform="translate(0,315)"  />
</g>

以上是现在让它发挥作用的变化：

<g class="blue">
<g id="g1">
    <rect x="0" y="0" width="100" height="100" />
    <rect x="0" y="105" width="100" height="100" />
    <rect x="0" y="210" width="100" height="100" />
</g>
</g>

<g class="red" transform="translate(0,315)">
<use xlink:href="#g1" />
<!-- <g id="g1">
    <rect x="0" y="0" width="100" height="100" />
    <rect x="0" y="105" width="100" height="100" />
    <rect x="0" y="210" width="100" height="100" />
</g> -->
</g>

...我也评论了一些旧的svg。

以下是更清晰的解决方案（上面的一些注释代码，实际上来自进一步的实验）。

<svg width="1000" height="800" 
xmlns="http://www.w3.org/2000/svg" version="1.1"
xmlns:xlink="http://www.w3.org/1999/xlink">

<style>
.blue {fill:blue;}
.red {fill:red;}
</style>


<g class="blue">
<g id="g1">
    <rect x="0" y="0" width="100" height="100" />
    <rect x="0" y="105" width="100" height="100" />
    <rect x="0" y="210" width="100" height="100" />
</g>
</g>

<g class="red" transform="translate(0,315)">
<use xlink:href="#g1" />
</g>

看起来样式需要在我的案例中在一个组之上的某个级别完成，并且正如Robert所指出的那样将以书面形式检索前一个组。

svg组和填充继承

0 个答案: