SVG 背景图像不跨浏览器水平拉伸

Question

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

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

没有指定 height/width
指定了视图框
已将 preserveAspectRatio 设置为 none

在按钮 CSS 上，我已将背景大小设置为 contain，因为封面将图像截断得非常厉害。（尝试了所有变体，cover/contain/100%，等等）

我遇到的问题是在 chrome/internet 资源管理器中它可以工作，SVG 的 top/bottom 不会被剪裁并且图像将拉伸整个按钮宽度而不保留纵横比但是在 Firefox 中它的行为有所不同。使用 contain 它不会切断图像但不会水平拉伸（从左到右）。

我什至尝试修改图像的 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>

旁注：希望避免使用 post-页面加载 js，它会在元素加载后计算 width/sets 它。

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

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

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

Answer 1

看起来你可以：

svg {
  width: fit-content;
  }

Answer 2

您当前代码的问题是 body width/height 是使用像素指定的，而不是响应单位，如百分比等

调整你的 body 的宽度和高度到你想要的 width% 和 height%，如果需要你可以创建一个 div 来包围 svg 并设置一个较低的 width/height 那里

当屏幕宽度小于 800px（当前指定的宽度）时，百分比将防止您的 svg 裁剪。

希望对您有所帮助

Answer 3

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

Answer 4

首先，我对您正在使用的 svg 进行了一些更改。

我已将 viewBox 从 viewBox="0 0 320 56" 更改为 viewBox="0 0 320 48"。实际的 viewBox 太高，在 "potato" 下方留下了空隙。为了正确处理，我使用了 .getBBox 方法。这将返回包装组的边界框，返回值如下所示：

SVGRect {x: 0.5, 
         y: 0.5008549094200134, 
         width: 319.0018005371094, 
         height: 46.9991455078125
}

我可以使用这些值来构建 viewBox，我得到的是：

viewBox = "0.5 0.5 319 47"

但是我想对土豆使用stroke-width="3"（这只是一个例子，你可以使用你想要的值）。如果 stroke-width="3" 我需要一个稍微大一点的 viewBox，因为我不希望笔划被切断。所以我正在使用 viewBox="0 0 320 48"

如果您打算在不同尺寸的按钮上使用图像，笔划也会缩放，您会得到更粗或更细的笔划。此外，由于您使用的是 preserveAspectRatio="none" 笔划可能会变得不规则，因为它在 x 和 y 上的拉伸可能不同。这个问题的解决方案是使用 vector-effect='non-scaling-stroke'

console.log(theG.getBBox())

svg{border:1px solid;}

<svg preserveAspectRatio="none" viewBox="0 0 320 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <g id="theG">
        <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"  stroke="#EAE7EE" fill="#FFFFFF" vector-effect='non-scaling-stroke' stroke-width='3'></path>
    </g>
</svg>

现在我使用 svg 图像作为按钮的背景。对于演示，我使用的是数据 uri，但您可以使用外部文件。

我注释掉 border: none; 只是因为我想展示 "potato" 是如何覆盖按钮的。

我使用 background-size: 100%;

而不是 background-size: contain;

我希望这就是你要问的。

body {
  font: 32px sans-serif; color: #444;
  margin: 1em;
  width: 30%;
  height: 80%;
  border: 1px solid blue;
  padding: 20px;
}

div {
  border: 0.5px dotted red;
  padding: 10px;
  margin: none;
}

button {
  padding: 10px;
  background-color: transparent !important;
  border-radius: 0 !important;
  box-shadow: none;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.4px;
  /*border: none !important;*/
 
  /*background-image: url("https://svgshare.com/i/E46.svg");*/
  background-image: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' viewBox='-1.5 -.5 323 49' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg %3E%3Cpath 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='%23EAE7EE' fill='none' vector-effect='non-scaling-stroke' stroke-width='3' %3E%3C/path%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat !important;
  background-size: 100%;
  background-position: center !important;
  width: 100%; 
}

p {
  padding: none;
  margin: none;
  font-size: 15px;
}

<html>
<head>
 <title>Svg issue</title>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width">
</head>
<body>
  <p>Body</p>
  <div>
    <button>Svg Button</button>
  </div>
</body>
</html>

SVG 背景图像不跨浏览器水平拉伸

SVG Background image not stretching horizontally cross-browsers

html

css

firefox

svg

cross-browser