SVG无法占满父容器宽度及图标定位问题求助

问题1：给文本旁添加图标 #

直接在SVG里文本旁边加个图标路径（以铅笔为例），把文本和图标放进同一个<g>组里，方便统一定位：

• 用<path>定义铅笔图标的路径，调整x坐标让它位于文本右侧
• 通过坐标或transform属性让图标与文本垂直居中对齐

问题2：让SVG适配父容器宽度 #

调整SVG的样式属性，确保它能完全填充父容器：

• 给SVG添加style="width: 100%; height: 100%;"，强制继承父容器的尺寸
• 保留preserveAspectRatio="none"，让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" style="width: 100%; height: 100%;">
    <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>
    <!-- 文本和图标放同一组，统一对齐 -->
    <g text-anchor="middle" alignment-baseline="middle">
      <text x="128" y="64" font-family="Arial" font-size="10" fill="white">Updated SVG</text>
      <!-- 铅笔图标路径，可按需调整尺寸位置 -->
      <path d="M150 58 L160 68 L140 78 L130 68 Z M155 63 L135 83 L125 73 L145 53 Z" fill="white" />
    </g>
  </svg>
</div>

补充说明 #

• 如果需要更精致的图标，也可以使用现成的SVG图标资源，通过<use>标签复用
• 确保viewBox的尺寸与SVG内部图形的实际大小匹配，这是容器适配的基础

内容的提问来源于stack exchange，提问作者Utkarsh Dubey