Question

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

以下是代码：

 <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下拉菜单。有什么想法吗？

Answer 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

SVG在WebKit和Firefox中的位置不同

1 个答案: