SVG Фоновое изображение не растягивается по горизонтали в кросс-браузерах

Question

Я пытался разместить изображение SVG в качестве фона кнопки, чтобы растянуть ее по горизонтали, игнорируя при этом соотношение сторон.

Изменения, внесенные в сам SVG (вставленный ниже):

1. Не указана высота / ширина
2. Указано ли поле просмотра
3. Для preserveAspectRatio установлено значение none

На кнопке CSS я установил размер фона , содержащий , поскольку обложка очень сильно обрезает изображение. (Перепробовал все варианты, обложка / содержит / 100% и т. Д.)

У меня проблема в Chrome / Internet Explorer, он работает, верх / низ SVG не обрезается, и изображение растягивается на всю ширину кнопки, не сохраняя соотношение сторон, однако в Firefox ведет себя по-другому. Если содержит , изображение не будет обрезано, но не будет растягиваться по горизонтали (слева направо).

Я даже пытался изменить атрибут 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>

Sidenote: Хотел бы избежать использования постстраничной загрузки 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 с 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: contain; Я использую background-size: 100%;

Надеюсь, это то, о чем вы спрашиваете.

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>

Answer 3

Проблема с вашим текущим кодом заключается в том, что ширина / высота тела указываются в пикселях, а не в реагирующих единицах, например, в процентах и ​​т. Д.

Отрегулируйте ширину и высоту тела в соответствии с желаемой шириной,% и высотой.%, и при необходимости вы можете создать div, чтобы окружить svg и установить там более низкую ширину / высоту.

Проценты не позволят svg обрезаться, если ширина экрана меньше 800px (ширина указана в данный момент).

Надеюсь, это поможет

Answer 4

похоже, что вы могли бы просто:

svg {
  width: fit-content;
  }