时间戳

首页 > 解决方案 > SVG背景图像没有跨浏览器水平拉伸

html - SVG背景图像没有跨浏览器水平拉伸

问题描述

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

对 SVG（粘贴在下面）本身所做的更改：

  1. 没有指定高度/宽度
  2. 有一个指定的视图框
  3. 已将 preserveAspectRatio 设置为无

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

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

我什至尝试修改图像的视口属性，以诱使它认为 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 中打开它以查看问题。

标签： htmlcssfirefoxsvgcross-browser

解决方案

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

推荐阅读