SVG не занимает всю ширину контейнера div

Возникла проблема, когда SVG не занимает полную ширину родительского div.

Я пробовал обновить viewBox и добавить атрибуты ширины и высоты в SVG, но ни один из подходов не сработал.

Мое требование,

Я хочу, чтобы этот цвет SVG менялся динамически. -- ✔
Я хочу, чтобы внутри этого SVG был динамический текст. -- ✔

Я уже выполнил эти задачи, как показано во фрагменте кода.

Я столкнулся с этими двумя проблемами,

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

Изображение без текста и значка – небольшой родительский элемент div

Изображение с текстом и значком – большой родительский элемент div

Я попробовал эту ссылку SO, но это не сработало - SVG не говорит о ПОЛНОЙ «ширине» контейнера

<div style = "width:100%; height: 128px; border:1px dashed black;"> 
  <svg xmlns = "http://www.w3.org/2000/svg" viewBox = "0 0 512 128" preserveAspectRatio = "none">
    <g transform = "translate(0.000000,128.000000) scale(0.050000,-0.050000)" fill = "#0000FF" stroke = "none">
      <path d = "M358 1627 l352 -352 -347 -348 -348 -347 920 0 920 0 348 348 347 347 -353 353 -352 352 -920 0 -920 0 353 -353z"/>
    </g>
    <text x = "128" y = "64" font-family = "Arial" font-size = "10" fill = "white" text-anchor = "middle" alignment-baseline = "middle">Updated SVG</text>
  </svg>
</div>

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

— 01.07.2024 15:10

SVG занимает всю ширину родительского div. Вы можете проверить, задав SVG цвет фона. Проблема в том, что viewBox намного шире, чем фигура внутри.

— 01.07.2024 15:11

@DA, как мне увеличить среднюю часть SVG, есть ли у тебя ссылка?

— 01.07.2024 15:18

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

— 01.07.2024 15:24

css-shape.com/breadcrumb

— 01.07.2024 15:36

html css user-interface svg user-experience

01.07.2024 14:58

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

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

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

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

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

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

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

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

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

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

Ответы 1

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

Как говорится в комментарии @D A, это, вероятно, самый гибкий способ сделать это.
Это обеспечит легкую модификацию.

    .breadcrumb-container {
      display: flex;
      align-items: center; /* aligns the middle vertically */
      height: 40px; /* fixed height */
    }

    .breadcrumb-tail,
    .breadcrumb-head,
    .breadcrumb-body {
      display: flex;
      align-items: center; /* vertical centering */
      justify-content: center; /* horizontal centering */
      height: 40px; /* fixed height */
      background: #0000ff; /* same color for all parts */
    }

    .breadcrumb-tail {
      --s: 20px; /* control the shape */
      line-height: 1.8; /* control the height */
      padding-inline: calc(var(--s) + 0.3em) 0.3em;
      clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, var(--s) 50%);
      width: 40px; /* adjust width */
    }

    .breadcrumb-body {
      width: 100px; /* adjust width */
    }

    .breadcrumb-head {
      --s: 20px; /* control the shape */
      line-height: 1.8; /* control the height */
      padding-inline: .3em calc(var(--s) + .3em);
      clip-path: polygon(0 0,calc(100% - var(--s)) 0,100% 50%,calc(100% - var(--s)) 100%,0 100%);
      width: 40px; /* adjust width */
    }

    .breadcrumb-body span {
      color: white; /* text color */
    }

<!DOCTYPE html>
<html>
<head>
  <title>SVG</title>
<body>
  <div class = "breadcrumb-container">
    <div class = "breadcrumb-tail"></div>
    <div class = "breadcrumb-body"><span>Updated SVG</span></div>
    <div class = "breadcrumb-head"></div>
  </div>
</body>
</html>

01.07.2024 16:30

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

Css min-height: fit-content не работает с изменением размера

Почему мои наведенные изображения не выравниваются в HTML

Размер сгенерированного шрифта HTML отличается от исходного

Как добавить пробел между двумя текстами в компоненте значка Mantine?

Marquee не прокручивает все

Маскировка части границы

Как мне заставить мой CSS работать в Chrome?

Печать и предварительный просмотр веб-страницы не работают должным образом в браузере Microsoft Edge

Способ определения точных свойств стиля, которые в данный момент применяются веб-анимацией (без смешивания со всеми применяемыми в данный момент стилями)

Более разумный способ «сместить» элемент из его контейнера (с фоном)?

SVG не занимает всю ширину контейнера div

Ответы 1

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

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