svg - 如何在 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 class="svgLeftShape"></div>

我这样设置他的css:

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

应该工作，不是吗？

好吧，它没有按预期工作!

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

我究竟做错了什么？

在以下Fiddle ，我在右侧添加了一个“css”圆圈，以确保我没有遗漏基础知识。

最佳答案

Warning :

First, you should know that the CSS Shapes Module Level 1 actualy (april 2015) has the status of "Candidate Recommendation". As this means it is a work in progress, it may change at any moment and therefore shape-outside should not be used other than for testing.

该属性(property)实际上是only supported by 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 控制哪个级别定义形状的轮廓。属性(property)。

编辑:在 CSS shapes module level 2 中讨论了将 svgs 用于 shape-outside 属性。

关于svg - 如何在 svg 中定义的路径周围环绕文本(使用 css)？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29948316/

Answer 1

Warning :

First, you should know that the CSS Shapes Module Level 1 actualy (april 2015) has the status of "Candidate Recommendation". As this means it is a work in progress, it may change at any moment and therefore shape-outside should not be used other than for testing.

该属性(property)实际上是only supported by 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 控制哪个级别定义形状的轮廓。属性(property)。

编辑:在 CSS shapes module level 2 中讨论了将 svgs 用于 shape-outside 属性。