我希望通过CSS或JavaScript来实现文字环绕圆形图片的效果，就像您下面所看到的那样。
#corner {
border-radius: 100%;
background: url(https://osiprodwusodcspstoa01.blob.core.windows.net/en-us/media/187a9a09-fb97-4a5e-a8a2-620c782d6c67.png);
background-position: left top;
background-repeat: repeat;
padding: 20px;
width: 150px;
height: 150px;
}<p id="corner"></p>我在互联网上搜索了但没有找到有用的东西。
你可以使用SVG中的<textPath>实现此功能。如果你使用SVG，就不需要将文本拆分为单个字符。路径只是使用椭圆弧命令编写的一个圆形。
<svg viewBox="0 0 400 400">
<defs>
<path id="MyPath"
d="M 200, 200
m -100, 0
a 100,100 0 1,1 200,0
a 100,100 0 1,1 -200,0
" />
</defs>
<text font-family="Verdana" font-size="30" fill="rgb(248,203,173)" stroke="rgb(237,125,49)">
<textPath xlink:href="#MyPath">
I want to bend my text around the circle.
</textPath>
</text>
<circle fill="none" stroke="rgb(165,195,251)" cx="200" cy="200" r="80" stroke-width="10" filter="blur(3px)" />
<circle fill="rgb(146,208,80)" stroke="rgb(169,209,142)" stroke-width="2px" cx="200" cy="200" r="78" />
</svg>body{
text-align: center;
margin-top: 30px;
}
#corner{
margin-top: 50px;
background: #92d050;
width: 150px;
height: 150px;
border-radius: 50%;
display: inline-block;
-webkit-box-shadow: 0 0 6px 6px #a7c5fb, 0 3px 6px #a7c5fb;
box-shadow: 0 0 6px 6px #a7c5fb, 0 3px 6px #a7c5fb;
}
.contaner {
position: relative;
width: 280px;
margin: auto;
}
span {
font-family: 'sans-serif', Tahoma, Geneva, Verdana, sans-serif;
position: absolute;
color: #f8cbad;
-webkit-text-stroke: 1px #ed7d31;
font-size: 30px;
}
.char1 {
transform: rotate(-90deg);
left: 26px;
top: 105px;
}
.char2 {
transform: rotate(-72deg);
left: 21px;
top: 78px;
}
.char3 {
transform: rotate(-56deg);
left: 33px;
top: 58px;
}
.char4 {
transform: rotate(-56deg);
left: 44px;
top: 43px;
}
.char5 {
transform: rotate(-49deg);
left: 57px;
top: 31px;
}
.char6 {
transform: rotate(-37deg);
left: 72px;
top: 18px;
}
.char7 {
transform: rotate(-32deg);
left: 82px;
top: 9px;
}
.char8 {
transform: rotate(-17deg);
left: 104px;
top: 2px;
}
.char9 {
transform: rotate(-8deg);
left: 123px;
top: -1px;
}
.char10 {
transform: rotate(7deg);
left: 143px;
top: 0px;
}
.char11 {
transform: rotate(13deg);
left: 161px;
top: 3px;
}
.char12 {
transform: rotate(36deg);
left: 184px;
top: 18px;
}
.char13 {
transform: rotate(45deg);
left: 207px;
top: 33px;
}
.char14 {
transform: rotate(68deg);
left: 224px;
top: 54px;
}
.char15 {
transform: rotate(68deg);
left: 229px;
top: 69px;
}
.char16 {
transform: rotate(83deg);
left: 234px;
top: 89px;
}
.char17 {
transform: rotate(90deg);
left: 239px;
top: 105px;
}
.char18 {
transform: rotate(114deg);
left: 235px;
top: 133px;
}
.char19 {
transform: rotate(114deg);
left: 233px;
top: 146px;
}
.char20 {
transform: rotate(122deg);
left: 222px;
top: 157px;
}
.char22 {
transform: rotate(143deg);
left: 196px;
top: 187px;
}
.char21 {
transform: rotate(132deg);
left: 211px;
top: 173px;
}
.char23 {
transform: rotate(152deg);
left: 179px;
top: 196px;
}
.char24 {
transform: rotate(172deg);
left: 154px;
top: 206px;
}
.char25 {
transform: rotate(178deg);
left: 131px;
top: 208px;
}
.char25d {
transform: rotate(189deg);
left: 112px;
top: 207px;
}
.char26 {
transform: rotate(213deg);
left: 86px;
top: 198px;
}
.char27 {
transform: rotate(219deg);
left: 79px;
top: 190px;
}
.char28 {
transform: rotate(220deg);
left: 66px;
top: 183px;
}
.char29 {
transform: rotate(228deg);
left: 50px;
top: 171px;
}
.char30{
transform: rotate(241deg);
left: 44px;
top: 157px;
}
.char31{
transform: rotate(241deg);
left: 30px;
top: 142px;
}
.char32{
transform: rotate(241deg);
left: 24px;
top: 127px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div class="contaner">
<p id="corner"></p>
<!-- <p>I want to bend my text around the circle.</p> -->
<span class="char1">I</span>
<span class="char2">w</span>
<span class="char3">a</span>
<span class="char4">n</span>
<span class="char5">t</span>
<span class="char6">t</span>
<span class="char7">o</span>
<span class="char8">b</span>
<span class="char9">e</span>
<span class="char10">n</span>
<span class="char11">d</span>
<span class="char12">m</span>
<span class="char13">y</span>
<span class="char14">t</span>
<span class="char15">e</span>
<span class="char16">x</span>
<span class="char17">t</span>
<span class="char18">a</span>
<span class="char19">r</span>
<span class="char20">o</span>
<span class="char21">u</span>
<span class="char22">n</span>
<span class="char23">d</span>
<span class="char24">t</span>
<span class="char25">h</span>
<span class="char25d">e</span>
<span class="char26">c</span>
<span class="char27">i</span>
<span class="char28">r</span>
<span class="char29">c</span>
<span class="char30">l</span>
<span class="char31">e</span>
<span class="char32">.</span>
</div>
</body>
</html>SVG的方法简单而紧凑，但如果需要更灵活的东西怎么办？这里是我用JavaScript的解决方案。
window.addEventListener('load', wrap);
function wrap() {
var image = document.querySelector('#image-to-wrap');
var text = document.querySelector('#wrapping-text');
var start = -90;
var angle = 360;
var radius = image.clientHeight / 2;
var centerX = image.getBoundingClientRect().left + radius;
var centerY = image.getBoundingClientRect().top + radius;
var characters = text.innerHTML.split('');
var step = angle / characters.length - 1;
text.innerHTML = '';
for (var i = 0; i < characters.length; i++) {
buildItem(i);
}
function buildItem(i) {
var item = document.createElement('span');
item.innerHTML = characters[i];
text.appendChild(item);
var w = item.clientWidth;
var h = item.clientHeight;
var a = (start + step * i) * Math.PI / 180;
item.style.left = centerX - w / 2 + radius * Math.sin(a) + 'px';
item.style.top = centerY - h - radius * Math.cos(a) + 'px';
item.style.transform = 'rotate(' + a + 'rad)';
}
}#image-to-wrap {
height: 250px;
margin: 50px;
width: 250px;
}
#wrapping-text {
color: MistyRose;
font-family: serif;
font-size: 50px;
-webkit-text-stroke: 1px Salmon;
}
#wrapping-text span {
position: absolute;
transform-origin: 50% 100%;
}<img id="image-to-wrap" src="https://upload.wikimedia.org/wikipedia/commons/8/85/Reinel_wind_rose_round.png">
<p id="wrapping-text">Reinel wind rose round</p>function writeInCircle(phrase, cx, cy, fontSize) {
var d = $("<div>").addClass("writeInCircle").appendTo("body")
var num = phrase.length
var r = num * fontSize / 6
$(d).css({
position: "absolute",
width: (2 * r) + "px",
height: (2 * r) + "px",
left: (cx - r) + "px",
top: (cy - r) + "px"
})
for (var i = 0; i < num; i++) {
var s = $("<span>").html(phrase.charAt(i)).appendTo(d)
a = i / num * 2 * Math.PI
var x = cx + r * Math.cos(a)
var y = cy + r * Math.sin(a)
$(s).css({
"position": "absolute",
left: x + "px",
top: y + "px",
"fontSize": fontSize
})
console.log(z.charAt(i) + " " + x + "," + y)
}
}
z = "This is the text you need"
cx = 200
cy = 150
fontSize = 30
$(function() {
writeInCircle(z, cx, cy, fontSize)
})
但我建议使用SVG。这比在HTML和JS中重新创建文本更有用。
有两种方法，一种是使用 jQuery，你将每个字符分割并按照示例中所示进行排列；另一种方式是使用 CSS，你将为每个字符分配一个类，然后像下面的代码一样单独进行转换。 html
<div id="simple_arc">
<span class='w0'>i</span>
<span class='w1'></span>
<span class='w2'>w</span>
<span class='w3'>a</span>
<span class='w4'>n</span>
<span class='w5'>t</span>
<span class='w6'></span>
<span class='w7'>t</span>
<span class='w8'>o</span>
<span class='w9'></span>
</div>
CSS
#simple_arc {
display: block;
width:306px;
height:305px;
}
单词的CSS样式
#simple_arc>span[class^=w]{
display:block;
position:absolute;
-moz-transform-origin:50% 100%;
-webkit-transform-origin:50% 100%;
-o-transform-origin:50% 100%;
-ms-transform-origin:50% 100%;
transform-origin:50% 100%;
}
#simple_arc span{
font-size:38px;
font-weight:regular;
font-style:normal;
line-height:0.65;
white-space:pre;
overflow:visible;
padding:0px;
}
#simple_arc .w0 {
-moz-transform: rotate(-1.14rad);
-webkit-transform: rotate(-1.14rad);
-o-transform: rotate(-1.14rad);
-ms-transform: rotate(-1.14rad);
transform: rotate(-1.14rad);
width: 21px;
height: 24px;
left: 42.7px;
top: 93.95px;
}