SVG背景图片未横向拉伸跨浏览器

Question

我一直在尝试将SVG图像作为背景放置在按钮上，以便在不考虑其长宽比的情况下水平拉伸。

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

1. 未指定高度/宽度
2. 已指定一个视图框
3. 将preserveAspectRatio设置为none

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

我遇到的问题是它在chrome / internet资源管理器中起作用，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中将其打开以查看问题。

Answer 1

在我的FF浏览器中，如果您将background-size: 100%更改为background-size: 100% 100%，则可以使用。此属性采用两个参数width和height，如果未提供，则将height设置为auto。我猜想，取决于版本，您可能需要设置-moz-background-size。

Answer 2

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

我已将viewBox从/* this is for bootstrap it will automatical change ur butoon in square if u want just change it class btn this where u can change by the way don't forget to add !important in the end of style */ .btn{ border-radius:none !important; }更改为<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <div class="row"> <div class="col-4"> <button type="button" class="btn btn-primary px-1">buton-1</button> </div> <div class="col-4"> <button type="button" class="btn btn-warning px-1">buton-2</button> </div> <div class="col-4"> <button type="button" class="btn btn-success px-1">buton-3</button> </div> </div>。实际的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 = "0.5 0.5 319 47" ，我将需要一个稍大的viewBox，因为我不希望剪切笔划。所以我正在使用stroke-width="3"

如果打算在不同大小的按钮上使用图像，则笔划也会缩放，并且笔触会变粗或变细。另外，由于您使用的是stroke-width="3"，因此笔划可能会变得不规则，因为它在x和y上的拉伸方式可能有所不同。解决此问题的方法是使用viewBox="0 0 320 48"

preserveAspectRatio="none"

vector-effect='non-scaling-stroke'

console.log(theG.getBBox())

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

我之所以将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>而不是border: none;

我希望这就是你要问的。

background-size: contain;

background-size: 100%;

Answer 3

当前代码的问题是，车体的宽度/高度是使用像素指定的，而不是诸如百分比之类的响应单位。

将身体的宽度和高度调整为所需的width％和height％，如果需要，可以创建一个div围绕svg，并在其中设置较低的宽度/高度。

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

希望这会有所帮助

Answer 4

看起来您可以：

svg {
  width: fit-content;
  }