SVG 未占据容器 div 的全宽

Question

面临 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>

Answer 1

当然！以下是解决路径小于其 viewBox 的 SVG 问题的方法，以及简洁的替代文本建议：

SVG 调整： 检查 SVG 路径：打开 SVG 文件并确保内部路径或图形在其 viewBox 坐标内正确定位。

调整 viewBox：修改 viewBox 属性以紧贴图形边缘。例如，如果图形的尺寸从坐标 10,10 开始为 100x100，请使用 viewBox="10 10 100 100"

Answer 2

正如@D A 的评论所说，这可能是最flex可行的方法。
它将确保轻松修改。

    .breadcrumb-container {
      display: flex;
      align-items: center; /* aligns them vertically in the middle */
      height: 40px; /* Fixed height to see the shapes */
    }

    .breadcrumb-tail,
    .breadcrumb-head,
    .breadcrumb-body {
      height: 40px; /* Fixed height to see the shapes */
      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 to your needs */
    }

    .breadcrumb-body {
      width: 100px; /* Adjust width to your needs */
    }

    .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 to your needs */
    }

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

SVG 未占据容器 div 的全宽

问题描述投票：0回答：2

2个回答

最新问题

SVG 未占据容器 div 的全宽

问题描述 投票：0回答：2

2个回答

最新问题

问题描述投票：0回答：2