Растягивать образ SVG для того, чтобы Вы заняли весь размер контейнера

У меня есть образ SVG (в каталоге, хотя для практических эффектов, Вы могли бы быть inline) и я хочу, чтобы Вы заняли все пространство контейнера. Для этого я определил высоту и ширину в div что содержит ее, и я поместил Вам в CSS ширину и высоту 100 % в образ:

div {
  width:400px;
  height:200px;
  background:#f0f0f0;
}

div svg {
  width:100%;
  height:100%;
}
<div>
  <svg width="320" height="90" viewBox="0 0 320 90">
    <rect x="0" y="0" width="320" height="90" rx="10" ry="10" fill="#114477" />
  </svg>
</div>

Но поскольку возможно видеть в примере наверху, образ только прибывает в первый предел, который находится (ширина или высота) и, хотя Вы продолжаете расти, не удается занять всему пространству контейнера (образ не растягивается), что является тем, что интересует меня.

Как Вы могли бы достигать этого?

1
задан 18.10.2016, 07:16
3 ответа

То, за чем оно последует, состоит в том, что ты пробуешь деформировать изображение, а именно менять аспект. Если то, в чем ты нуждаешься, состоит в том, чтобы занимать совсем площадь, просто ты должен предоставлять стоимость none в признак preserveAspectRatio отметки svg чтобы показывать, что ты хочешь изменить пропорцию:

<svg ... preserveAspectRatio="none">

Только ты нуждаешься в этом, чтобы решать проблему.

4
ответ дан 24.11.2019, 13:04
  • 1
    Привет @JuanManuel. и #161; Желанный в Стакк Оверфлов в espaГ±ol ! Превосходный ответ. Я уверен, что быть виден, и # 237; в гораздо лучше, если ты мог добавлять его c и # 243; я говорю, что я завершаю. Под твоим ответом est и # 225; ссылка для издавать , и внутри редактора нужно кликать в bot и # 243; n " расколол на части язык сценариев JavaScript / HTML / CSS " – Mariano 18.10.2016, 09:41

div#rectangulo {
  padding:0;
  margin:0;
  width:400px;
  height:200px;
  background:#f0f0f0;
}

div#rectangulo * {
  width:100%;
  height:100%;
}
<div id="rectangulo">
  <svg>
    <rect x="0" y="0"  rx="10" ry="10" fill="#114477" />
  </svg>
</div>

Сосредоточись на изменениях, которые я сделал. Твои этикетки svg и rect они содержали стоимость width и height, из-за которого sobreescribían те, что ты написал ранее.

id rectangulo чтобы идентифицировать более легко div, к которому ты хочешь добавить это свойство

2
ответ дан 24.11.2019, 13:04
  • 1
    Этот soluci и # 243; n функционируй для этого изображения в частности (что - пример м и # 237; nimo), действительно у меня есть SVG много м и # 225; s комплекс (с paths, текст, фильтры...) в том, который я не могу способствовать тому, чтобы все было 100 %, потому что не быть видным, и # 225; хорошо. Я чувствую confusi и # 243; n, быть должным и # 237; чтобы быть м и # 225; s просвет. – Alvaro Montoro♦ 18.10.2016, 14:09

Это происходит, потому что width и height из svg не влияют на width и height из показанной фигуры, высота и ширина фигуры манипулирует посредством признака viewBox , как он хочет, чтобы были получены вышеупомянутые свойства div (контейнер), bastarГ - в тем, что не разместил этот признак viewBox и aГ±adiГ©ndole alto и ancho в rect 100%

    div {
  width:400px;
  height:100px;
  background:#f0f0f0;
}

 svg {
  width:100% ;
  height:100% ;
}
<div>
  <svg >
    <rect x="0" y="0" width="100%" height="100%" rx="10" ry="10" fill="#114477" />
  </svg>
</div>
2
ответ дан 24.11.2019, 13:04
  • 1
    Этот soluci и # 243; n функционируй для этого изображения в частности (что - пример м и # 237; nimo), действительно у меня есть SVG много м и # 225; s комплекс (с paths, текст, фильтры...) в том, который я не могу способствовать тому, чтобы все было 100 %, потому что не быть видным, и # 225; хорошо. Я чувствую confusi и # 243; n, быть должным и # 237; чтобы быть м и # 225; s просвет. – Alvaro Montoro♦ 18.10.2016, 14:10