масштабируйте SVG в элементе flex, чтобы соответствовать высоте контейнера Flex и сохранить соотношение сторон - PullRequest
Новая
       103

масштабируйте SVG в элементе flex, чтобы соответствовать высоте контейнера Flex и сохранить соотношение сторон

0 голосов
/ 22 марта 2020
  • Я хочу иметь SVG рядом с div с текстом.
  • SVG должен сохранять пропорции при масштабировании, чтобы соответствовать высоте родителя.
  • Родитель должен быть достаточно высоким, чтобы вместить текст в другом элементе flex.
  • Я хотел бы сделать этот компонент, который будет многократно использоваться с различным количеством текста.

Я пробовал несколько подходов, и самый близкий, который я получил, который удерживает SVG от исчезновения в Chrome находится в этом коде: https://codepen.io/rosshathaway/pen/ExjePpM. Проблема в том, что SVG занимает как можно больше места. CSS: 

* {
  box-sizing: border-box;
}

.outer {
  display: flex;
}

.inner {
  margin: 4px;
  border-top: dotted 8px black;
  border-right: dotted 8px black;
  border-bottom: dotted 8px black;
  padding: 0.5em 2em;
}

.logo {
  position: relative;
  height: 0;
  width: 100%;
  padding: 0;
  padding-bottom: 100%;
}

svg {
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
}

HTML: 

<div class="outer">
  <div class="logo">
    <svg
  version="1.0"
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 93 93"
  preserveAspectRatio="xMidYMid meet"
>
  <g
    transform="translate(0, 93) scale(0.100000,-0.100000)"
    fill="#231f20"
    stroke="none"
  >
    <path
      d="M0 465 l0 -465 465 0 465 0 0 465 0 465 -465 0 -465 0 0 -465z m598
285 c62 -28 136 -101 163 -164 30 -68 31 -180 1 -248 -71 -160 -268 -237 -423
-166 -78 35 -124 80 -160 154 -27 54 -32 76 -32 134 0 145 102 273 248 311 47
13 151 2 203 -21z"
    />
    <path
      d="M270 455 l0 -195 200 0 200 0 0 195 0 195 -200 0 -200 0 0 -195z
m360 0 l0 -155 -160 0 -160 0 0 155 0 155 160 0 160 0 0 -155z"
    />
    <path
      d="M397 550 c-31 -25 -51 -80 -42 -119 15 -68 102 -109 164 -77 36 19
71 70 71 104 0 31 -25 77 -52 96 -33 23 -109 21 -141 -4z m129 -33 c55 -48 20
-137 -55 -137 -74 0 -109 83 -56 135 31 32 75 32 111 2z"
    />
  </g>
</svg>
  </div>
  <div class="inner">
    A few <br>
    lines <br>
    of text <br>
    bla bla bla bla bloop <br>
    aADSF<br>
    gljsdf
  </div>
</div>

Спасибо.

Ответы [ 2 ]

1 голос
/ 22 марта 2020

Как правило, это , а не , указано c SVG.

Проблема 1 - «удалить соотношение сторон CSS трюк»

padding-bottom: 100%; - это трюк для 1:1 Aspect Ratio box - в вашем случае значок `svg1 уже квадрат (поэтому удалите эти дополнительные стили) https://www.w3schools.com/howto/howto_css_aspect_ratio.asp

Проблема 2

Вы установили два столбца - один с текстом и один с изображением.

Свойство flex-based указывает начальную длину гибкого элемента. https://www.w3schools.com/cssref/css3_pr_flex-basis.asp

flex-basis по умолчанию автоматически.

auto ==> Браузер рассчитает и выберет ширину для указанного элемента ( ширина, мдн документы ). Таким образом, результат выглядит «глючным» (огромное изображение и маленький столбец текста):

enter image description here 

* {
  box-sizing: border-box; 
}

.outer {
  display: flex;
  border: dotted 8px red;
}

.inner {
}

.logo {
  width: 100%;;
  height: auto;
}
<div class="outer">
  <div class="logo">
    <svg
  version="1.0"
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 93 93"
  preserveAspectRatio="xMidYMid meet"
>
  <g
    transform="translate(0, 93) scale(0.100000,-0.100000)"
    fill="#231f20"
    stroke="none"
  >
    <path
      d="M0 465 l0 -465 465 0 465 0 0 465 0 465 -465 0 -465 0 0 -465z m598
285 c62 -28 136 -101 163 -164 30 -68 31 -180 1 -248 -71 -160 -268 -237 -423
-166 -78 35 -124 80 -160 154 -27 54 -32 76 -32 134 0 145 102 273 248 311 47
13 151 2 203 -21z"
    />
    <path
      d="M270 455 l0 -195 200 0 200 0 0 195 0 195 -200 0 -200 0 0 -195z
m360 0 l0 -155 -160 0 -160 0 0 155 0 155 160 0 160 0 0 -155z"
    />
    <path
      d="M397 550 c-31 -25 -51 -80 -42 -119 15 -68 102 -109 164 -77 36 19
71 70 71 104 0 31 -25 77 -52 96 -33 23 -109 21 -141 -4z m129 -33 c55 -48 20
-137 -55 -137 -74 0 -109 83 -56 135 31 32 75 32 111 2z"
    />
  </g>
</svg>
  </div>
  <div class="inner">
    A few <br>
    lines <br>
    of text <br>
    bla bla bla bla bloop <br>
    aADSF<br>
    gljsdf
  </div>
</div>

одно решение - добавить flex-grow: 1; к text-col

flex-grow: 1; - Элемент будет увеличиваться с коэффициентом 1. Он заполнит оставшееся пространство, если ни один другой элемент flexbox не имеет значения flex-grow. https://cssreference.io/property/flex-grow/

Для svg добавьте любую ширину по вашему желанию (20%, 100px или 20em).

enter image description here

.flex-container {
  display: flex;
  border: 1px dashed orange;
}
#col1{
  max-width: 100%;
  border: 3px dashed violet;
}
#col2{
  border: 2px dashed blue;
  flex-grow: 1;
}
svg {
  height: auto;
  width: 150px;
}
  <section class="flex-container">
    <div id="col1">
      <svg
    version="1.0"
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 93 93"
    preserveAspectRatio="xMidYMid meet"
  >
    <g
      transform="translate(0, 93) scale(0.100000,-0.100000)"
      fill="#231f20"
      stroke="none"
    >
      <path
        d="M0 465 l0 -465 465 0 465 0 0 465 0 465 -465 0 -465 0 0 -465z m598
  285 c62 -28 136 -101 163 -164 30 -68 31 -180 1 -248 -71 -160 -268 -237 -423
  -166 -78 35 -124 80 -160 154 -27 54 -32 76 -32 134 0 145 102 273 248 311 47
  13 151 2 203 -21z"
      />
      <path
        d="M270 455 l0 -195 200 0 200 0 0 195 0 195 -200 0 -200 0 0 -195z
  m360 0 l0 -155 -160 0 -160 0 0 155 0 155 160 0 160 0 0 -155z"
      />
      <path
        d="M397 550 c-31 -25 -51 -80 -42 -119 15 -68 102 -109 164 -77 36 19
  71 70 71 104 0 31 -25 77 -52 96 -33 23 -109 21 -141 -4z m129 -33 c55 -48 20
  -137 -55 -137 -74 0 -109 83 -56 135 31 32 75 32 111 2z"
      />
    </g>
  </svg>
  <br>
   width: 150px;
    </div>
    <div  id="col2" class="col">
      A few <br>
      lines <br>
      of text <br>
      bla bla bla bla bloop <br>
      aADSF<br>

     
      </p>
      gljsdf
    </div>
  </section>

Связанный стекопоток Q:

Оставить заполнение div * горизонтальным * пробелом во flexbox

0 голосов
/ 03 апреля 2020

Я закончил делать новый SVG, который включает в себя границу. Это будет правильно масштабироваться, но размер точек для границы и расстояние между ними будут меняться, вместо того, чтобы создавать или удалять точки, которые имеют исходный размер, как будет делать граница CSS.

...