но мы же видим, что синим залито всё окно.
For HTML documents, however, we recommend that authors specify the background for the BODY element rather than the HTML element. For documents whose root element is an HTML "HTML" element or an XHTML "html" element that has computed values of 'transparent' for 'background-color' and 'none' for 'background-image', user agents must instead use the computed value of the background properties from that element's first HTML "BODY" element or XHTML "body" element child when painting backgrounds for the canvas, and must not paint a background for that child element. Such backgrounds must also be anchored at the same point as they would be if they were painted only for the root element.
Ограничения
В целях безопасности, Gecko ограничивает некоторые возможности SVG когда он используется как картинка:
* Отключен JavaScript;
* Не загружаются внешние ресурсы (например картинки, стили), хотя их можно использовать, если добавить в виде data: URI
* […]
.container {
background: rgba(0, 0, 0, 0.8);
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: auto;
}
.window {
background: #ffffff;
width: 900px;
padding: 10px;
margin: 20px auto;
}svg {
transform: translateZ(0);
}div {
margin: auto;
width: 100vw;
height: 75vw;
}
@media screen and (min-aspect-ratio: 4/3) {
div {
width: 133.33vh;
height: 100vh;
}
}<div>
<svg viewBox="0 0 1 1"></svg>
<p>А что внутри?</p>
</div>div {
display: table-cell;
box-shadow: 0 0 5px red;
position: relative;
}
svg {
display: block;
width: 12.5vw;
max-width: 15vh;
visibility: hidden;
}
div p {
position: absolute;
margin: 0;
padding: 10px;
top: 0;
left: 0;
right: 0;
bottom: 0;
box-shadow: 0 0 5px blue inset;
}