SVG背景图像没有跨浏览器水平拉伸答案

【问题标题】：SVG Background image not stretching horizontally cross-browsersSVG背景图像没有跨浏览器水平拉伸
【发布时间】：2019-11-20 01:03:56
【问题描述】：

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

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

没有指定高度/宽度
指定了一个视图框
已将 preserveAspectRatio 设置为无

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

我遇到的问题是在 chrome/internet explorer 中它可以工作，SVG 的顶部/底部没有被剪裁，并且图像将拉伸整个按钮宽度，但在 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>

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

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

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

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

【问题讨论】：

你试过检查元素吗？也请在此处发布您的 SVG 代码（或其重要部分）
我的意思是在 Firefox 和 Chrome 中，您可以右键单击并检查网页上的元素。 Firefox 和 Chrome Firefox 更好。
一点也不偏离，我们只知道您告诉我们什么。你的 CSS background-* 似乎也是错误的——那是一个 PHP 变量吗？您需要使用浏览器 Inspector 来查看发生了什么
这不是在 Firefox 68 中修复的吗？你在运行那个版本吗？
我刚刚更新到 Firefox 68，之前在 67 上运行，但似乎没有修复。如果我将背景大小设置为包含。它在 chrome/Internet Explorer 中都能完美运行。

标签： html css firefox svg cross-browser

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

我已将 viewBox 从 viewBox="0 0 320 56" 更改为 viewBox="0 0 320 48"。实际的 viewBox 太高了，在“土豆”下面留下了一个空白。为了使它正确，我使用方法.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;，只是因为我想展示“土豆”是如何覆盖按钮的。

我使用的是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>

【讨论】：

非常感谢您花时间和精力整理这个答案。我玩过你在这里所做的事情。我发现在 Firefox 中，按钮缩放不正确，顶部/底部仍然被切断。如果你在 Firefox 中运行代码 sn-p，你可以看到这一点。令人惊讶的是另一个提到背景大小的答案：100% 100%;似乎修复它。我没试过，只做了一次 100%。

【解决方案3】：

您当前代码的问题是正文宽度/高度是使用像素指定的，而不是响应单位，例如百分比等。

将身体的宽度和高度调整为所需的宽度%和高度%，如有必要，您可以创建一个 div 来围绕 svg 并在那里设置较低的宽度/高度。

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

希望对你有帮助

【讨论】：

问题是，我链接的代码笔有点毫无意义。我将 SVG 用作背景图像，而 css 的工作方式不同，也没有 css 属性，例如背景大小等。我认为最好删除该 codepen 并尝试在 SVG 所在的位置包含一个通过按钮背景图像上的 URL 引用。
已更新：使用正确的代码笔重新创建问题。当您在Firefox中打开它时，您会明白我的意思。 codepen.io/anon/pen/mZgqpO
@JARRRRG 您的 codepen 在我的 firefox 和 chrome 浏览器中的性能相同。您使用的是哪个版本的 FF/Chrome？（我用 FF 67.03 和 68 以及 Chrome 75 进行了测试——最新的 vsn）

【解决方案4】：

看起来你可以：

svg {
  width: fit-content;
  }

【讨论】：