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

Question

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

风格

svg {
  background:#ddd;
}

svg > svg{
  background:#444;
}

rect {
  fill:#55c;
}

马克鲁普

<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 规范中。外部 SVG 元素是一个替换元素，它更像是一个普通的 html 元素，因此当用作 html 网页的一部分时，它确实观察到了额外的 html 属性。

如果您想要一个背景，只需将一个<rect>具有适当填充且高度和宽度为 100% 的元素作为内部 svg 元素的第一个子元素。