如何将文本环绕在 svg 中定义的路径（使用 css）？

Question

我的目标是在 svg 定义的形状周围包裹一些文本。

形状是看起来像带有 1/2 圆孔的矩形的路径。

<svg width="100px" height="200px" viewBox="0 0 50 100">
    <path id="halfcircleLeft" d="M 50 26 ... Z" style="fill: lightgray;"></path>
</svg>

在 html 中，我用 <div> 定义包装元素

<div class="svgLeftShape"></div>

我这样设置他的CSS：

.svgLeftShape
{
    shape-outside: url(#halfcircleLeft);
    float: left;
    width: 100px;
    height: 200px;
}

应该可以工作，不是吗？

嗯，它没有按预期工作！

听起来文本围绕着通过 css 宽度和高度定义的矩形。对 svg 元素的形状引用被忽略......

我究竟做错了什么？

在下面的Fiddle中，我在右侧添加了一个“css”圆圈，只是为了确保我没有错过基础知识。

Answer 1

警告 ：

首先，您应该知道CSS Shapes Module Level 1实际上（2015 年 4 月）具有“候选推荐”状态。由于这意味着它是一项正在进行的工作，它可能随时发生变化，因此除了测试之外，不应该使用shape-outside 。

该属性实际上仅受 Chrome 支持，并且需要-webkit-您未包含在代码中的供应商前缀。

这是一个只能在 chrome 37+ 中查看的示例：

.shape {
  -webkit-shape-outside: circle(100px);
  shape-outside: circle(100px);
  width: 200px;
  height: 200px;
  float: left;
}

<div class="shape"></div>
<p>It includes techniques such as applying herbal-infused oils to the body, manual tissue manipulation, deep tissue work, identifying & acting on specific points, mobilizing the joints, and warming the body. It includes techniques such as applying herbal-infused
  oils to the body, manual tissue manipulation, deep tissue work, identifying & acting on specific points, mobilizing the joints, and warming the body. It includes techniques such as applying herbal-infused oils to the body, manual tissue manipulation,
  deep tissue work, identifying & acting on specific points, mobilizing the joints, and warming the body. It includes techniques such as applying herbal-infused oils to the body, manual tissue manipulation, deep tissue work, identifying & acting on specific
  points, mobilizing the joints, and warming the body.</p>

使用图像作为 shape-outside ：

我不知道你是否可以使用 svg 图像。但您可以使用 .png 图像，形状将根据图像的透明度生成：

img{
  -webkit-shape-outside: url(http://i.imgur.com/yZcQxF6.png);
  shape-outside: url(http://i.imgur.com/yZcQxF6.png);
  float: left;
  width: 100px;
  height: 200px;
}

<img src="http://i.imgur.com/yZcQxF6.png"/>
<p>It includes techniques such as applying herbal-infused oils to the body, manual tissue manipulation, deep tissue work, identifying & acting on specific points, mobilizing the joints, and warming the body. It includes techniques such as applying herbal-infused oils to the body, manual tissue manipulation, deep tissue work, identifying & acting on specific points, mobilizing the joints, and warming the body. It includes techniques such as applying herbal-infused oils to the body, manual tissue manipulation, deep tissue work, identifying & acting on specific points, mobilizing the joints, and warming the body. It includes techniques such as applying herbal-infused oils to the body, manual tissue manipulation, deep tissue work, identifying & acting on specific points, mobilizing the joints, and warming the body It includes techniques such as applying herbal-infused oils to the body, manual tissue manipulation, deep tissue work, identifying & acting on specific points, mobilizing the joints, and warming the body. It includes techniques such as applying herbal-infused oils to the body, manual tissue manipulation, deep tissue work, identifying & acting on specific points, mobilizing the joints, and warming the body. It includes techniques such as applying herbal-infused oils to the body, manual tissue manipulation, deep tissue work, identifying & acting on specific points, mobilizing the joints, and warming the body. It includes techniques such as applying herbal-infused oils to the body, manual tissue manipulation, deep tissue work, identifying & acting on specific points, mobilizing the joints, and warming the body.</p>

注意：如果您的图像具有多个透明度级别，您可以使用shape-image-threshold属性控制定义形状轮廓的级别。

编辑： CSS 形状模块级别 2中讨论了使用 svgs 作为 shape-outside 属性