将文本环绕在圆形元素周围-前端问题

Wrapping a text around a circular element(将文本环绕在圆形元素周围)

本文介绍了将文本环绕在圆形元素周围的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有两个DIV，如下所示，我一直在尝试让两个圆圈之间的文本环绕内圈，如附加的图像所示。我未能达到预期效果。

HTML

<div id="outer-circle">

This is just a test logo name    

    <div id="inner-circle">

    </div><!-- End Inner Circle -->

</div><!-- End Outer Circle -->

CSS

* {
    margin: 0 auto;
}

#inner-circle {
    width: 200px;
    height: 200px;
    border-radius: 100%;
    background-color: green;
    margin-top: 28px;
    position: relative;

}

#outer-circle {
    width: 300px;
    height: 300px;
    border-radius: 100%;
     background-color: blue;
    margin-top: 50px;
    text-align center;
    text-align: left;

}

Click here to see current but undesired result

预期结果示例

css

参见this post by Chris Coyier，其中推荐答案将文本的每个字符分成<span>，并使用css旋转依次旋转每个字符：

.char1 {
  -webkit-transform: rotate(6deg);
  -moz-transform: rotate(6deg);
  -ms-transform: rotate(6deg);
  -o-transform: rotate(6deg);
  transform: rotate(6deg);
}
.char2 {
  -webkit-transform: rotate(12deg);
  -moz-transform: rotate(12deg);
  -ms-transform: rotate(12deg);
  -o-transform: rotate(12deg);
  transform: rotate(12deg);
}
...etc

或使用Dirk Weber's csswarp.js Service，其功能大致相同，但使用javascript为您生成html和CSS。(csswarp.js on GitHub)

或在路径上使用SVG文本，如this example from useragentman.com

<svg id="myShape" xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <path id="path1"
          fill="none" stroke="black" stroke-width="1"
          d="M 212,65
             C 276,81 292,91 305,103 361,155 
               363,245 311,302 300,314 286,324 
               271,332 248,343 227,347 202,347 
               190,346 174,343 163,339 143,333">
    </path>
  </defs>
  <text id="myText">
    <textPath  xlink:href="#path1" >
      <tspan dy="0.3em">C is for Cookie, That's Good Enough For Me!</tspan>
    </textPath>
  </text>
</svg>

或.

使用图像。

这篇关于将文本环绕在圆形元素周围的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！