WebKit 和 Firefox 中的 SVG 位置不同答案

【问题标题】：SVG position different in WebKit and FirefoxWebKit 和 Firefox 中的 SVG 位置不同
【发布时间】：2014-06-24 14:35:29
【问题描述】：

我正在重新设计网站并使用 SVG 来渲染设计中的一些图形。出于某种原因，与 Firefox 相比，SVG 在 WebKit 浏览器窗口中向下移动了大约 31 像素。屏幕截图：

代码如下：

 <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>

当我看到这是网络检查器时，我看不到任何可以像这样制作 SVG 下拉菜单的东西。有什么想法吗？

【问题讨论】：

无法重现“错误”(jsfiddle.net/P97PL)。它向我暗示它不是 SVG ..它是它周围的元素。有链接吗？
看看你的小提琴，它在 Firefox 和 Chrome 中的显示不同（在 Chrome 中，SVG 被下推）。这是开发中页面的链接：dev.writebrainmedia.com/HTML-new
在我的 Chrome 和 Safari(5) 中都很好。那么这是什么问题。火狐或 Webkit。您知道包装器上有 20 像素的边距，主体有 12 像素的内边距……不是吗？
我希望它像在 Firefox 中一样显示。是的，我知道我在顶部总共有 32px 的空间。在 WebKit 浏览器中，它在 svg 上方增加了 16px 的额外空间并将其向下推。如果它在 Webkit 与 Firefox 中看起来与您相同，我猜您的旧版本的 Webkit 浏览器是原因。
对我来说，看起来最可疑的部分是 width 属性和 max-width 内联 CSS 的混合。 WebKit 和 Blink 通常在调整 SVG 大小和渲染 SVG 方面很糟糕，所以我会负责它并声明明确的宽度/高度，或者只提供 viewBox 并将其放在 HTML 页面上定义明确的框中。

标签： css firefox svg webkit

【解决方案1】：

问题原来是我在 SVG 中的 preserveAspectRatio 设置。我将其设置为：preserveAspectRatio="xMidYMid meet"，它使 SVG 中的元素呈现在 viewBox 的中间。来自 MDN：

xMidYMin - 强制统一缩放。将元素 viewBox 的中点 X 值与视口的中点 X 值对齐。将元素的 viewBox 与视口的最小 Y 值对齐。

将此设置更改为 xMinyMin 使 SVG 中的元素呈现在 viewBox 的顶部和左侧。

来自 MDN：

xMinYMin - 强制统一缩放。将元素的 viewBox 与视口的最小 X 值对齐。将元素的 viewBox 与视口的最小 Y 值对齐。

preserveAspectRatio on MDN

【讨论】：