SVG样式的子SVG元素不显示背景颜色

Question

我可以设置root svg元素的背景颜色，但似乎无法让它与decedent元素一起使用。

样式

svg {
  background:#ddd;
}

svg > svg{
  background:#444;
}

rect {
  fill:#55c;
}

Makrup

<svg>
    <svg x="0px" y="0px" width="50%" height="50%">
        <rect x="33%" y="33%" width="33%" height="33%"/>
    </svg>
    <svg x="50%" y="50%" width="50%" height="50%">
        <rect x="33%" y="33%" width="33%" height="33%"/>
    </svg>
    <rect x="16.6%" y="66%" width="16.6%" height="16.6%"/>
    <rect x="66%" y="16.6%" width="16.6%" height="16.6%"/>
</svg>

Answer 1

background-color不是SVG元素支持的CSS属性。它们支持的所有属性都列在SVG Specification中。外部SVG元素是一个替换元素，它更像是普通的html元素，因此当用作html网页的一部分时，它会观察到其他html属性。

如果你想要一个背景，只需将一个<rect>元素放入适当的填充，高度和宽度为100％作为内部svg元素的第一个子元素。