如何将此文本更改为圆形？答案

【问题标题】：How do I change this text to be shaped like a circle?如何将此文本更改为圆形？
【发布时间】：2021-04-13 03:55:16
【问题描述】：

正如标题所说，我希望将这个文本：“English.Math.Science.HSIE.Agriculture.PDHPE.IST.Photography”变成圆形而不是直线。这需要什么代码？

这是我现在的代码

#rotatingtext{
    position: absolute;
    top: 1800px;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 20px;
    color: white;
    font-weight: nold;
    animation: rotatingtext 20s infinite linear;
}

@keyframes rotatingtext{
    0% {
        transform: translateY(0) rotate(0deg);
        
    }
    100% {
        transform: translateY(0) rotate(360deg);

    }
}

&lt;div id="rotatingtext"&gt;English.Math.Science.HSIE.Agriculture.PDHPE.IST.Photography&lt;/div&gt;

【问题讨论】：

标签： javascript html css text

【解决方案1】：

你可以使用Text SVG

<svg viewBox="0 0 1000 500">
  <defs>
    <path id="CircularPath"
          d="M 200, 200
             m -150, 0
             a 150,150 0 1,0 300,0
             a 150,150 0 1,0 -300,0" />
  </defs>

  <use href="#CircularPath" fill="none" />
  <text font-family="Verdana" font-size="29.5" fill="blue" >
    <textPath href="#CircularPath">
      English.Math.Science.HSIE.Agriculture.PDHPE.IST.Photography
    </textPath>
  </text>

</svg>

根据this的回答，您可以使用以下公式更改CircularPath的x、y和r：

<path 
    d="
    M cx cy
    m -r, 0
    a r,r 0 1,0 (r * 2),0
    a r,r 0 1,0 -(r * 2),0
    "
/>

您可以使用side 属性确定文本是在圆圈内还是在圆圈外，但不幸的是side 并没有被很多浏览器广泛支持。

【讨论】：

【解决方案2】：

你可以试试这个谢谢>>>！

const degreeToRadian = angle => {
    return angle * (Math.PI / 180);
}

const pointOnCircle = (radius, angle = 0) => {
    const xPos = radius * Math.cos(degreeToRadian(angle));
    const yPos = radius * Math.sin(degreeToRadian(angle));
    return {
        x: xPos,
        y: yPos
    }
}

const radius = 200;
const diameter = radius * 2;

const circle = document.querySelector('#circular-text');

circle.style.width = `${diameter}px`;
circle.style.height = `${diameter}px`;

const text = circle.innerText;
const characters = text.split('');
circle.innerText = null;

const startAngle = -90;
const endAngle = 270;
const angleRange = endAngle - startAngle;

const deltaAngle = angleRange / characters.length;
let currentAngle = startAngle;

characters.forEach((char, index) => {
    const charElement = document.createElement('span');
    charElement.innerText = char;
    circle.appendChild(charElement);

    let { x: xPos, y: yPos } = pointOnCircle(radius, currentAngle);
    
    /**
     * Move center of drawn circle to 
     * match parents center.
     */
    xPos += radius;
    yPos += radius;

    const translate = `translate(${xPos}px, ${yPos}px)`;
    const rotate = `rotate(${index * deltaAngle}deg)`;

    charElement.style.transform = `${translate} ${rotate}`;

    currentAngle += deltaAngle;
});

@import url("https://fonts.googleapis.com/css2?family=Anonymous+Pro&display=swap");

body {
  height: 100vh;
  width: 100vw;
  margin: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "Anonymous Pro", "Monospace";
  font-size: 30px;
  background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
#circular-text {
  position: relative;
  background: #fff;
  color: #000;
  border-radius: 100%;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.15);
  padding: 20px;
}

#circular-text span {
  position: absolute;
  transform-origin: top left;
}

&lt;div id='circular-text'&gt;Keep calm and stay put.&lt;/div&gt;

【讨论】：