如何使用CSS实现文本环绕SVG图片？附代码及效果展示

嘿，刚好折腾过文本环绕SVG的需求，其实思路和处理普通图片类似，但SVG的矢量特性能玩出更灵活的不规则环绕效果，给你整理了两种实用的实现方案：

方案一：基础浮动实现矩形文本环绕 #

这是最通用的入门方法，适合SVG是矩形样式，或者你只需要基础的矩形环绕效果，代码简单易上手：

HTML 代码 #

<div class="content-wrapper">
  <svg class="float-svg" viewBox="0 0 200 200" width="200" height="200">
    <!-- 这里替换成你的SVG内容，示例是一个绿色矩形 -->
    <rect x="0" y="0" width="200" height="200" fill="#42b983" />
  </svg>
  <p>这里是需要环绕的文本内容，Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
  <p>继续补充测试文本，Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit.</p>
</div>

CSS 代码 #

.content-wrapper {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.float-svg {
  float: left; /* **关键**：设置浮动触发文本环绕 */
  margin-right: 20px; /* 给文本和SVG之间留缓冲间距 */
  margin-bottom: 10px;
}

方案二：进阶不规则文本环绕（利用shape-outside） #

如果你的SVG是圆形、自定义路径这类不规则形状，想要文本沿着SVG的轮廓紧密环绕，就可以用CSS的shape-outside属性配合SVG路径实现：

HTML 代码 #

<div class="content-wrapper">
  <svg class="shape-svg" viewBox="0 0 200 200" width="200" height="200">
    <!-- 自定义不规则SVG形状，给形状添加id方便CSS引用 -->
    <path id="svg-shape" d="M100,0 C155,0 200,45 200,100 C200,155 155,200 100,200 C45,200 0,155 0,100 C0,45 45,0 100,0 Z M100,50 L150,100 L100,150 L50,100 Z" fill="#42b983" />
  </svg>
  <p>这里是需要环绕的文本内容，Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
  <p>继续补充测试文本，Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit.</p>
</div>

CSS 代码 #

.content-wrapper {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.shape-svg {
  float: left;
  margin-right: 20px;
  margin-bottom: 10px;
  /* **关键**：引用SVG的路径，让文本沿着路径轮廓环绕 */
  shape-outside: url("#svg-shape");
  /* **可选**：增加文本和SVG形状之间的缓冲间距 */
  shape-margin: 10px;
}

效果预览 #

额外注意事项 #

• 务必给SVG设置明确的width/height或者viewBox属性，否则浮动布局可能失效
• shape-outside属性支持现代主流浏览器（Chrome、Firefox、Edge），IE不兼容，需要兼容旧浏览器的话可以降级用方案一
• 如果SVG是外部文件，shape-outside也可以直接引用外部SVG的路径，比如shape-outside: url("your-custom-shape.svg#svg-shape")

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