SVG not filling its viewBox

with width 100%, and parent with % width

by robatwilliams

HTML

<div class="container">
    <svg preserveAspectRatio="none" viewBox="0 0 300 100" >
        <rect fill="red" width="350" height="100" />
        <rect fill="yellow" width="300" height="100" />
    </svg>
</div>

CSS

.container {
    margin: 10px;
    background-color: blue;
    width: 70%;
}

svg {
    display: block;
    height: 30px;
    width: 100%;
}

JavaScript

/*
Chrome 29, IE 9, Firefox 23:
red line on right, top, bottom, or any combination of edges.
Where/if it/they appear seems to vary randomly as the window is resized, but is always present on initial page load.


Opera 12: correct
*/