SVG не имеет правильного размера в CSS-сетке

ProgramBox

SVG не имеет правильного размера в CSS-сетке

Post author:admin
Запись опубликована:8 января, 2022
Post category:Вопросы по программированию

#css #svg

Вопрос:

У меня проблема с определением размера SVG внутри сетки. Я мало что знаю о SVG (кроме того, как их создавать и экспортировать из illustrator, и что мы можем настроить их с помощью атрибутов цвета, заливки, обводки и т.д.)

Я создал ручку, чтобы сделать это проще для понимания. Я просто хочу выровнять начальную точку с линией-1, а конечную точку SVG с линией-2, как показано ниже

Как вы можете видеть, SVG не очень заботится о размере, который я установил для своей сетки, — это переполнение.

скриншот здесь:

Мы могли бы поиграть с дополнениями, чтобы выровнять вещи, но я не хочу, чтобы сетка адаптировалась к размеру SVG, а наоборот. Ясно, что я не хочу заканчивать чем-то вроде приведенного ниже, потому что SVG слишком длинный и между 3 строками слишком большое расстояние.

 .container {
  display: grid;
  grid-template-columns: 1fr 5fr;
  grid-template-rows: 1fr 1fr 1fr;
  gap: 0em 0px;
  grid-auto-flow: row;
  grid-template-areas: "svg-icon line-1" "svg-icon line-2" "svg-icon line-3";
  width: 10rem;
  height: 6rem;
}

.line-1 {
  grid-area: line-1;
  font-size: 1.25em;
}

.line-2 {
  grid-area: line-2;
  font-size: 1em;
}

.line-3 {
  grid-area: line-3;
  font-size: 1.25em;
}

.svg-icon {
  grid-area: svg-icon;
}

 <div class="container">
  <div class="line-1">This is the line 1</div>
  <div class="line-2">This is the line 2</div>
  <div class="line-3">This is the line 3</div>
  <div class="svg-icon">
    <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 5.24 41.91"><path
        d="M2.63.5A2.12,2.12,0,1,1,.5,2.62,2.12,2.12,0,0,1,2.63.5h0m0-.5A2.62,2.62,0,1,0,5.25,2.62,2.62,2.62,0,0,0,2.63,0Z"
        transform="translate(-0.01)"
        fill="#fff"
      /><path
        d="M2.63.5A2.12,2.12,0,1,1,.5,2.62,2.12,2.12,0,0,1,2.63.5h0m0-.5A2.62,2.62,0,1,0,5.25,2.62,2.62,2.62,0,0,0,2.63,0Z"
        transform="translate(-0.01)"
      /><path
        d="M2.63,37.17A2.12,2.12,0,1,1,.5,39.29a2.12,2.12,0,0,1,2.13-2.12h0m0-.5a2.62,2.62,0,1,0,2.62,2.62h0A2.62,2.62,0,0,0,2.63,36.67Z"
        transform="translate(-0.01)"
        fill="#fff"
      /><path
        d="M2.63,37.17A2.12,2.12,0,1,1,.5,39.29a2.12,2.12,0,0,1,2.13-2.12h0m0-.5a2.62,2.62,0,1,0,2.62,2.62h0A2.62,2.62,0,0,0,2.63,36.67Z"
        transform="translate(-0.01)"
      /><line
        x1="2.61"
        y1="4.87"
        x2="2.61"
        y2="37.14"
        fill="none"
        stroke="#000"
        stroke-miterlimit="10"
        stroke-width="2"
      />
      <circle cx="2.61" cy="2.62" r="2.12" fill="#fff" /><circle
        cx="2.62"
        cy="39.29"
        r="2.12"
        fill="#fff"
      />
    </svg>
  </div>
</div>

Many thanks for your help.

Solution

We can’t set a height on a grid because the height of the grid is essentially determined by the width of the SVG element. So I guess we just have to remove the height on the grid and just play around with the width of the SVG so try to get the desired height of the whole thing.

 .container {
  display: grid;
  height: 400px;
  grid-template-areas: "svg-icon line-1" "svg-icon line-2" "svg-icon line-3";
  grid-template-columns: 4rem;
}

.svg-icon svg {
  width: 3rem;
  height: 100%;
}

.line-1 {
  grid-area: line-1;
  font-size: 2em;
  margin-top: 0.8rem;
  align-self:start;
}

.line-2 {
  grid-area: line-2;
  font-size: 1em;
  align-self:center;
}

.line-3 {
  grid-area: line-3;
  font-size: 2em;
  align-self:end;
  margin-bottom: 0.8rem;
}

.svg-icon {
  grid-area: svg-icon;
  justify-self: center;
}



.my-block {
  border: solid red 1px;
  padding: 0.25rem;
}

.container div {
  border: 1px solid lime;
}

 <div class="my-block">
  <div class="container">
    <div class="line-1">This is the line 1</div>
    <div class="line-2">This is the line 2</div>
    <div class="line-3">This is the line 3</div>
    <div class="svg-icon">
      <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 5.24 41.91"><path
        d="M2.63.5A2.12,2.12,0,1,1,.5,2.62,2.12,2.12,0,0,1,2.63.5h0m0-.5A2.62,2.62,0,1,0,5.25,2.62,2.62,2.62,0,0,0,2.63,0Z"
        transform="translate(-0.01)"
        fill="#fff"
      /><path
        d="M2.63.5A2.12,2.12,0,1,1,.5,2.62,2.12,2.12,0,0,1,2.63.5h0m0-.5A2.62,2.62,0,1,0,5.25,2.62,2.62,2.62,0,0,0,2.63,0Z"
        transform="translate(-0.01)"
      /><path
        d="M2.63,37.17A2.12,2.12,0,1,1,.5,39.29a2.12,2.12,0,0,1,2.13-2.12h0m0-.5a2.62,2.62,0,1,0,2.62,2.62h0A2.62,2.62,0,0,0,2.63,36.67Z"
        transform="translate(-0.01)"
        fill="#fff"
      /><path
        d="M2.63,37.17A2.12,2.12,0,1,1,.5,39.29a2.12,2.12,0,0,1,2.13-2.12h0m0-.5a2.62,2.62,0,1,0,2.62,2.62h0A2.62,2.62,0,0,0,2.63,36.67Z"
        transform="translate(-0.01)"
      /><line
        x1="2.61"
        y1="4.87"
        x2="2.61"
        y2="37.14"
        fill="none"
        stroke="#000"
        stroke-miterlimit="10"
        stroke-width="2"
      />
      <circle cx="2.61" cy="2.62" r="2.12" fill="#fff" /><circle
        cx="2.62"
        cy="39.29"
        r="2.12"
        fill="#fff"
      />
    </svg>
    </div>
  </div>
</div>

1. «Ясно, что я не хочу заканчивать чем — то подобным ниже, потому что между 3 строками слишком большое расстояние» — это помогло бы, если бы вы четко сказали, чего вы хотите, а не чего вы не хотите.

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

Ответ №1:

Часто, когда у вас возникают проблемы с css, вы можете удалить что — то, чтобы решить проблему-добавление большего не всегда «больше» здесь. ТАКИМ образом, мы можем удалить

   grid-template-columns: 1fr 5fr;
  grid-template-rows: 1fr 1fr 1fr;
  gap: 0em 0px;
  grid-auto-flow: row;

Все еще большой, но это ширина и высота, которые вы выбрали.

 .my-block {
  display: grid;
  grid-template-rows: 1fr auto;
  grid-template-columns: 25rem auto;
  /* remove the auto to get the trees below for example */
}

.container {
  grid-row: 1;
  grid-column: 1;
  display: grid;
  grid-template-areas: "svg-icon line-1" "svg-icon line-2" "svg-icon line-3";
  grid-template-columns: 4rem auto;
}

.line-1 {
  grid-area: line-1;
  font-size: 2em;
}

.line-2 {
  grid-area: line-2;
  font-size: 1em;
}

.line-3 {
  grid-area: line-3;
  font-size: 2em;
}

.svg-icon {
  grid-area: svg-icon;
  justify-self: center;
}

.svg-icon svg {
  width: 2rem;
  height: 100%;
}

.my-block {
  border: solid red 1px;
  padding: 0.25rem;
}

.container div {
  border: 1px solid lime;
}

 <div class="my-block">
  <div class="container">
    <div class="line-1">This is the line 1</div>
    <div class="line-2">This is the line 2</div>
    <div class="line-3">This is the line 3</div>
    <div class="svg-icon">
      <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 5.24 41.91"><path
        d="M2.63.5A2.12,2.12,0,1,1,.5,2.62,2.12,2.12,0,0,1,2.63.5h0m0-.5A2.62,2.62,0,1,0,5.25,2.62,2.62,2.62,0,0,0,2.63,0Z"
        transform="translate(-0.01)"
        fill="#fff"
      /><path
        d="M2.63.5A2.12,2.12,0,1,1,.5,2.62,2.12,2.12,0,0,1,2.63.5h0m0-.5A2.62,2.62,0,1,0,5.25,2.62,2.62,2.62,0,0,0,2.63,0Z"
        transform="translate(-0.01)"
      /><path
        d="M2.63,37.17A2.12,2.12,0,1,1,.5,39.29a2.12,2.12,0,0,1,2.13-2.12h0m0-.5a2.62,2.62,0,1,0,2.62,2.62h0A2.62,2.62,0,0,0,2.63,36.67Z"
        transform="translate(-0.01)"
        fill="#fff"
      /><path
        d="M2.63,37.17A2.12,2.12,0,1,1,.5,39.29a2.12,2.12,0,0,1,2.13-2.12h0m0-.5a2.62,2.62,0,1,0,2.62,2.62h0A2.62,2.62,0,0,0,2.63,36.67Z"
        transform="translate(-0.01)"
      /><line
        x1="2.61"
        y1="4.87"
        x2="2.61"
        y2="37.14"
        fill="none"
        stroke="#000"
        stroke-miterlimit="10"
        stroke-width="2"
      />
      <circle cx="2.61" cy="2.62" r="2.12" fill="#fff" /><circle
        cx="2.62"
        cy="39.29"
        r="2.12"
        fill="#fff"
      />
    </svg>
    </div>
  </div>
  <div>I have more happy trees than you</div>
</div>

1. Привет, Марк. Спасибо вам за ваш ответ. Вы правы, я ошибся в ширине и высоте контейнера, которые слишком велики, я изменил код, чтобы получить контейнер размером 10 x 6 дюймов; Очевидно, я могу поиграть с заполнением строк 1 и 3, чтобы выровнять их по SVG, но я хотел бы получить обратное: SVG адаптируется к размеру сетки, следовательно, к размеру строк. У меня также есть ограничение, что я работаю с контейнером фиксированного размера.

2. Не совсем на 100% уверен, что вы подразумеваете под тем, что я работаю с контейнером фиксированного размера, поэтому я добавил оболочку вокруг контейнера, чтобы проиллюстрировать что-то, на чем можно основываться, и сделал небольшой формат .container по размеру, чтобы показать, как это сделать. Вероятно, на этом вы можете основываться.

3. Я заметил, что вы удалили : «ширина: 10rem; высота: 6rem;» из сетки. Мне просто нужен фиксированный размер для этой сетки.

4. Если я возьму ваш пример и добавлю выравнивание по 3 строкам( начало в центре ), то это сработает. Поэтому, если мне нужна сетка высотой 6 метров, мне просто нужно поиграть с шириной SVG. Это «классический»/»хороший» способ справиться с подобными вещами?

5. @Big_Boulard grid дисплей можно использовать в любом случае для размера (содержимое определяет размер или контейнер определяет границы/размер блоков. Работа с выравниванием содержимого может выполняться на любом уровне или переопределяться определенным «блоком». Я нахожу, что ключ к достойному CSS-удалить как можно больше, чтобы получить желаемый результат

Метки: SVG не имеет правильного размера в CSS-сетке