html - SVG 背景图像不跨浏览器水平拉伸(stretch)

Question

我一直在尝试将 SVG 图像作为背景放置在按钮上以水平拉伸(stretch)，同时忽略其纵横比。

对 SVG(粘贴在下面)本身所做的更改:

1. 没有指定高度/宽度
2. 指定了一个 View 框
3. 将 preserveAspectRatio 设置为 none

在按钮 CSS 上，我将背景大小设置为 contain，因为封面会严重切断图像。 (尝试了所有变体，覆盖/包含/100%，等等)

我遇到的问题是在 chrome/internet explorer 中它可以工作，SVG 的顶部/底部不会被剪裁并且图像将拉伸(stretch)整个按钮宽度而不保留纵横比但是在 Firefox 中 它的行为有所不同。使用 contain 它不会切断图像，但不会水平拉伸(stretch)(从左到右)。

我什至尝试修改图像的 viewport 属性以欺骗它认为 SVG 从负 x 轴开始并在之后的几个像素处结束，但是切断非常糟糕以至于它不会真的很有帮助。

    background-image: -LocalPathToSvgHere-;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;

<?xml version="1.0" encoding="UTF-8"?>
<svg preserveAspectRatio="none" viewBox="0 0 320 56" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <title>Potato</title>
    <desc>Potato</desc>
    <g id="R/Button-Label/CTA/Tertiary" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <path d="M0.5,17.5326192 C0.5,21.134829 0.5,21.2157139 0.5,24.3520124 C0.5,26.6893708 8.46597491,37.9348422 13.1090932,43.0525551 C15.4600591,45.6438241 39.4446053,47.5 57.9273753,47.5 C61.5631859,47.5 61.5631859,47.5 70.4221316,47.5 C81.5195636,47.5 81.5195636,47.5 96.3478064,47.5 C130.481265,47.5 130.481265,47.5 170.584021,47.5 C211.871513,47.5 211.871513,47.5 246.64488,47.5 C261.588767,47.5 261.588767,47.5 272.461326,47.5 C276.981557,47.5 276.981557,47.5 280.178606,47.5 C282.663173,47.5 282.663173,47.5 283.620992,47.5 C289.29903,47.5 310.091972,42.3446581 315.622765,39.5788135 C317.865301,38.4573635 319.081148,33.9095947 319.408162,26.9801828 C319.548303,24.0106156 319.522522,21.0230455 319.387874,17.3717289 C319.369797,16.8815236 319.313978,15.4726684 319.310575,15.3831616 C319.286097,14.7393679 319.275069,14.3534829 319.275069,14.079734 C319.275069,13.2081444 315.100704,11.0519411 308.117483,8.31092871 C306.935674,7.84705249 305.671625,7.3636301 304.302705,6.85069851 C302.771485,6.27695358 301.186152,5.69460903 299.214559,4.97880769 C298.762445,4.81466439 295.499718,3.63387159 294.649303,3.32388632 C291.339557,2.11744935 289.744311,1.49373751 289.135173,1.13418709 C288.051185,0.494350173 265.467574,0.360897195 229.046494,0.636848595 C221.616635,0.693142366 213.785139,0.764151284 205.094422,0.851775487 C201.231941,0.890718969 197.382255,0.931029217 192.721132,0.98094912 C191.820559,0.990594125 184.181903,1.07289388 182.226924,1.09363588 C174.94256,1.17092176 171.309266,1.2036018 169.616598,1.2036018 C165.570019,1.2036018 165.570019,1.2036018 156.624478,1.2036018 C145.229455,1.2036018 145.229455,1.2036018 128.93547,1.2036018 C89.0245372,1.2036018 88.9990727,1.2036018 29.5806702,1.2036018 C26.0586592,2.89740564 23.1029239,4.49572223 20.7144439,5.99744516 C18.2932873,7.51971305 11.5600641,11.361798 0.5,17.5326192 Z" id="Button-Colour" stroke="#EAE7EE" fill="#FFFFFF"></path>
    </g>
</svg>

旁注:希望避免使用在元素加载后计算宽度/设置宽度的页面后加载 js。

============================================= ==============================

更新 - 创建了一个问题的工作示例 https://codepen.io/anon/pen/mZgqpO

在 chrome 和 firefox 中打开它以查看问题。

Answer 1

在我的 FF 浏览器中，如果您将 background-size: 100% 更改为 background-size: 100% 100%，它会起作用。此属性采用两个参数，width 和 height，如果未提供，则将 height 设置为 auto。我想，根据版本的不同，您可能需要设置 -moz-background-size。