SVG position different in WebKit and Firefox

Question

I'm working on a site redesign and am using SVGs to render some of the graphics in the design. For some reason, the SVG is being shifted down in WebKit browser windows by about 31px as compared to Firefox. Screen capture:

Here is the code:

 <svg version="1.1" id="shape1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" x="2" y="2" viewBox="-2 0 1002 704" xml:space="preserve" preserveAspectRatio="xMidYMid meet" style="min-width:980px; max-width: 1800px;">
<defs>
    <linearGradient id="gradient1" x1="0%" y1="0%" x2="100%" y2="100%" spreadMethod="pad">
        <stop offset="10%" stop-color="#ff7405" stop-opacity="1"/>
        <stop offset="90%" stop-color="#f89512" stop-opacity="1"/>
    </linearGradient>
    <filter id="shadow1" y="-1%" x="-1%" width="110%" height="150%">
        <feOffset in="SourceAlpha" dx="-2" dy="4" result="offset" />
        <feGaussianBlur in="offset" stdDeviation="1" result="blur" />
        <feColorMatrix in="blur" result="shadow" type="matrix"
          values="0 0 0 0 0
                  0 0 0 0 0 
                  0 0 0 0 0 
                  0 0 0 .6 0"/>
        <feMerge>
            <feMergeNode in="shadow" />
            <feMergeNode in="SourceGraphic" />
        </feMerge>
    </filter>
</defs>
<!-- MAIN BOX -->
<path class="wrap" fill-rule="evenodd" clip-rule="evenodd" style="fill: url(#gradient1); filter: url(#shadow1);" d="M32.3 0.3L935 82.8c34.3 4.2 38.7 28.9 34.1 59.2l-56.7 398.3c-6.4 23.2-29.8 32.9-66.4 34.8L95.4 643.3c-20.2 0-38.7-17.3-41.4-38.5L0.6 38.9C-2 17.6 12.1 0.3 32.3 0.3z"/>
<!-- STROKE -->
<path fill="none" class="wrap-stroke" stroke="#FFEB00" transform="translate(-42,-28)" d="M84.9,37.3l883.1,80c33.6,4.1,37.9,28.1,33.4,57.4l-55.5,386.5c-6.3,22.5-29.1,31.9-64.9,33.8l-734.3,66.2c-19.7,0-37.9-16.7-40.5-37.4L53.9,74.7C51.3,54.1,65.2,37.3,84.9,37.3z"/>

<!-- CONTACT BOX -->
    <svg x="290" y="490">
        <path fill-rule="evenodd" clip-rule="evenodd" fill="#FFC80C" style="stroke: #F26222; stroke-width: 3px;" stroke-miterlimit="10" d="M107.7,68.1l456.9-19.3 c9.1,0,16.5,7.9,16.5,17.5l-8.2,75.4c0,9.7-7.4,17.5-16.5,17.5L116,143.5c-9.1,0-16.5-7.9-16.5-17.5l-8.2-40.3 C91.3,75.9,98.6,68.1,107.7,68.1z"/>
    </svg>
 <!-- NAV BOX -->   
    <svg y="-40" x="230">
        <linearGradient id="gradient2" x1="0%" y1="0%" x2="100%" y2="100%" spreadMethod="pad">
            <stop  offset="5%" style="stop-color:#F68A1F"/>
            <stop  offset="95%" style="stop-color:#F99F1B"/>
        </linearGradient>
        <path style="fill-rule:evenodd;clip-rule:evenodd;fill:url(#gradient2);stroke:#FFC80C;stroke-width:2;stroke-miterlimit:4;" d="M69.2,90.5l580.3-4.8c7.7,0,11.5,1.9,9.8,8.8l-6.7,29c-2.1,5.5-6.2,7.1-13.9,7.1l-564.2-9.4c-5.6,0-7.7-1.8-9.5-7.1l-3.8-13.5 C59.1,92.9,61.4,90.9,69.2,90.5z"/>
    </svg>
</svg>
</svg>

When I look at this is web inspector, I see nothing that would be making the SVG dropdown like this. Any ideas?

Answer 1

The issue turned out to be the preserveAspectRatio setting I had in the SVG. I had it set to: preserveAspectRatio="xMidYMid meet" which made the elements in the SVG render in the middle of the viewBox. From MDN:

xMidYMin - Force uniform scaling. Align the midpoint X value of the element's viewBox with the midpoint X value of the viewport. Align the of the element's viewBox with the smallest Y value of the viewport.

Changing this setting to xMinyMin made the elements in the SVG render at the top and left of the viewBox.

From MDN:

xMinYMin - Force uniform scaling. Align the of the element's viewBox with the smallest X value of the viewport. Align the of the element's viewBox with the smallest Y value of the viewport.

preserveAspectRatio on MDN