How can I wrap text around a path defined in svg (using css)?
My goal is to wrap some text around a shape defined with svg.
The shape is a path like a rectangle with a 1/2 round hole.
<svg width="100px" height="200px" viewBox="0 0 50 100">
<path id="halfcircleLeft" d="M 50 26 ... Z" style="fill: lightgray;"></path>
</svg>
In html I am defining a wrapper element with a <div>
<div class="svgLeftShape"></div>
and i set it css like this:
.svgLeftShape
{
shape-outside: url(#halfcircleLeft);
float: left;
width: 100px;
height: 200px;
}
Should work, right?
Well, it doesn't work as expected!
It looks like the text is wrapped around a rectangle defined by the css width and height. The svg element shape reference is ignored ...
What am I doing wrong?
In the next Fiddle, I've added a "css" circle to the right to make sure I'm not missing the basics.
+3
source to share
2 answers
Warning:
First, you should know that the CSS Shapes Module Level 1 actualy (April 2015) has a Candidate Recommendation status. Since this means it is a work in progress it can change at any time and therefore shape-outside should not be used except for testing purposes.
This property is currently only supported by chrome and requires a vendor prefix -webkit-
that you did not include in your code.
Here's an example that you can only view in 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>
Using images for external form:
I don't know if you can use svg images or not. But you can use .png images and the shape will be created according to the transparency of the image :
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>
Note. If your image has multiple levels of transparency, you can control which level defines the outline of the shape using the shape-image-threshold .
EDIT: The use of svgs for the shape-outside property is discussed in CSS Module Level 2
+2
source to share
These are experimental features and I would not recommend using them as they will only display correctly in chrome.
.tri {
-webkit-shape-outside: polygon(0 0, 100% 100%, 0 100%);
float: left;
width: 40%;
height: 12ex;
background-color: lightgray;
-webkit-clip-path: polygon(0 0, 100% 100%, 0 100%);
}
.rect {
-webkit-shape-outside: inset(0 0, 100px 100px 100px 100px);
width: 100px;
height: 80px;
float: left;
background-color: tomato;
-webkit-clip-path: inset(0 0, 100px 100px 100px 100px);
}
.circ {
height: 100px;
width: 100px;
-webkit-shape-outside: circle(40%);
shape-outside: circle(40%);
transition: shape-outside 1s;
float: left;
background-color: tomato;
-webkit-clip-path: circle(40%);
}
.circ:hover {
-webkit-shape-outside: circle(50%);
shape-outside: circle(50%);
-webkit-clip-path: circle(50%);
}
<div class="main">
<div class="tri"></div>
<p>
This is really experimental and "CHROME ONLY", Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum
dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet
</p>
<div class="rect"></div>
<p>
This is really experimental and "CHROME ONLY", Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum
dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet
</p>
<div class="circ"></div>
<p>
HOVERING ?! hell yh :D HOVERING ?! hell yh :D HOVERING ?! hell yh :D HOVERING ?! hell yh :D HOVERING ?! hell yh :D HOVERING ?! hell yh :D HOVERING ?! hell yh :D HOVERING ?! hell yh :D HOVERING ?! hell yh :D HOVERING ?! hell yh :D HOVERING ?! hell yh :D
HOVERING ?! hell yh :D HOVERING ?! hell yh
</div>
All this wil only work in chrome at the time of writing unfortunately. The syntax now says that images are allowed.
So it's only
#image {
-webkit-shape-outside: url("http://i198.photobucket.com/albums/aa49/Nightlady070/Cliparts/Internet_Explorer_7_Logo_red_zps21ac8b59.png");
shape-outside: url("http://i198.photobucket.com/albums/aa49/Nightlady070/Cliparts/Internet_Explorer_7_Logo_red_zps21ac8b59.png");
-webkit-shape-image-threshold: 0.1;
shape-image-threshold: 0.1;
float: left;
}
<img id="image" src="http://i198.photobucket.com/albums/aa49/Nightlady070/Cliparts/Internet_Explorer_7_Logo_red_zps21ac8b59.png" />
<p>Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet,
Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Loremt, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet</p>
Now to SVG images SVG as a form draft There seems to be no support for this element yet, as it only finds outer svg elements, not form elements.
#image {
-webkit-shape-outside: url("http://images3.wikia.nocookie.net/__cb20120330024139/logopedia/images/d/d7/Google_Chrome_logo_2011.svg");
shape-outside: url("http://images3.wikia.nocookie.net/__cb20120330024139/logopedia/images/d/d7/Google_Chrome_logo_2011.svg");
-webkit-shape-image-threshold: 0.1;
shape-image-threshold: 0.1;
float: left;
}
<img id="image" src="http://images3.wikia.nocookie.net/__cb20120330024139/logopedia/images/d/d7/Google_Chrome_logo_2011.svg" />
<p>Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet,
Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet,
Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet</p>
+1
source to share