仅当内联而不是通过CSS时才受尊重的SVG属性

Question

应该是all SVG presentation attributes can be used as CSS properties.

然而preserveAspectRatio似乎仅在它是内联属性时才被观察到，而不是通过CSS。

html, body { width: 100%; height: 100%; margin: 0; }
.wrapper {
    width: 50%; height: 10%;
}
.box {
    padding: 10px; margin: 5px;
    border: 5px solid #888; border-radius: 5px;
    background-color: #eee; color: #000;

    position: relative;
}
rect.rfoo { fill: #8af; }

svg.myrect1 {
    position: absolute;
    preserveAspectRatio: none;
    left:0; top:0; width:100%; height:100%;
}
svg.myrect2 {
    position: absolute;
    left:0; top:0; width:100%; height:100%;
}

<div class="box wrapper">
    <svg class="myrect1" viewBox="0 0 300 200">
        <rect class="rfoo" x="25" y="25" width="250" height="150"></rect>
    </svg>
</div>
<div class="box wrapper">
    <svg preserveAspectRatio="none" class="myrect2" viewBox="0 0 300 200">
        <rect class="rfoo" x="25" y="25" width="250" height="150"></rect>
    </svg>
</div>

为什么？

Answer 1

preserveAspectRatio不是 a presentation attribute。