Область просмотра вложенного svg не работает должным образом

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

<svg width = "300" height = "100" viewBox = "0 0 300 100">
        <svg>
          <line x1 = "10" x2 = "275" y1 = "100" y2 = "100" fill = "grey"/>
        </svg>
        <svg>
          <line
            x1 = "10"
            x2 = "275"
            y1 = "100"
            y2 = "100"
            fill = "green"
          />
        </svg>
      </svg>

css

09.05.2022 09:43

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Ваши элементы <line> размещаются с некоторыми полями/отступами из-за их свойств x/y:

      <line x1 = "10" x2 = "275" y1 = "100" y2 = "100" fill = "grey"/>

переводится как:

начните строку с x=10 единиц svg;
проведите линию к x (2) = 275.
Таким образом, вы получите единицы левое поле 10 и единицы правое поле 25.

Кроме того, свойство <fill> не повлияет на <line> элементы.
Вы устанавливаете цвета обводки с помощью атрибута stroke.

Если вам нужно, чтобы ваш вложенный svg был растянут до ширины родительского svg, вам также нужно будет установить
preserveAspectRatio = "none" и width:100%:

.svg-parent {
  border: 1px dotted red;
}

.svg-parent-responsive {
  width: 100%;
}

.line {
  stroke-width: 5;
  stroke: #000;
  vector-effect: non-scaling-stroke;
}

.line-green {
  stroke: green;
}

.line-gray {
  stroke: gray;
}

.resize {
  resize: both;
  overflow: auto;
  border: 1px solid #ccc;
  padding: 1em;
}

<div class = "resize">

  <svg class = "svg-parent" width = "300px" height = "100px" viewBox = "0 0 300 100">
    <svg>
      <line class = "line line-gray" x1 = "0" x2 = "100%" y1 = "50" y2 = "50"  />
    </svg>
  <svg>
      <line class = "line line-green" x1 = "0" x2 = "100%" y1 = "75" y2 = "75" />
    </svg>
  </svg>

  <svg class = "svg-parent svg-parent-responsive" preserveAspectRatio = "none" height = "100" viewBox = "0 0 300 100">
    <svg>
      <line class = "line line-gray" x1 = "0" x2 = "100%" y1 = "50" y2 = "50"  />
    </svg>
  <svg>
      <line class = "line line-green" x1 = "0" x2 = "100%" y1 = "75" y2 = "75" />
    </svg>
  </svg>

</div>
<p>Resize me</p>

09.05.2022 19:35

Другие вопросы по теме

Как заставить длинный текст столбца CSS расширять сетку, а не переполняться?

Не могу понять, как изменить фон html

Как сделать листовку адаптивной?

Как отключить прокрутку заднего экрана при отображении всплывающего окна

CSS: сделать родительское изображение заполненным, но не изменить родительский размер

Есть ли способ без использования JS манипулировать строковым значением пользовательской переменной CSS во время наведения?

У меня есть некоторые ошибки в этом источнике

Bootstrap 5: изменить высоту/использовать отступы для элемента option

Как сделать так, чтобы 2 перекрывающихся элемента заполнили своего родителя

Как применить CSS к n-му вложенному элементу?

Область просмотра вложенного svg не работает должным образом

Ответы 1

Другие вопросы по теме

Похожие вопросы