在形状路径上写文字

Question

有没有一种方法可以在js / css中围绕形状写文本？我尝试了SVG库，但没有找到可以在形状周围而不是内部 书写文本的库。

我也希望文本像字幕一样移动，但可以二维移动，但这不是关键的附加功能。

我发现一个解决方案是使用Lottie/BodyMoving从After Effects中导出动画SVG，该解决方案的问题是响应性。

这里是一个例子。 预先感谢

Answer 1

我看到已经有一些答案了。这是我的：

我正在使用的路径的长度是rect长度的两倍，而“线圈”的长度是其两倍。我正在给ExpiringSession设置动画，当SessionRepository达到50％时，我将其设为0％。

startOffset

startOffset

let so = 0
function Marquee(){
  requestAnimationFrame(Marquee)
  tp.setAttributeNS(null,"startOffset",so+"%");
  if(so >= 50){so = 0;}
  so+= .05
}

Marquee()

Answer 2

通过SVG <textPath>元素，您可以定义文本的形状。如果形状是闭合路径，则显示的文本量取决于周围的内容。

请注意，路径顺时针运行。如果它是逆时针运行的，那么除非您设置side="right"，否则文本将按理论顺序放在里面-但这是SVG2规范的一部分，并且尚未在所有浏览器中实现。

动画很棘手，因为文本不会“环绕”，而是从头到尾运行，并且您看到的文本的哪一部分在其过程中会发生变化。这些SMIL动画也不能在IE / Edge中本地运行，您需要使用FakeSmile polyfill。

text {
  font-family: sans-serif;
  font-size: 10px;
}

<svg viewBox="0 0 300 150">
  <defs>
    <path id="shape" d="M20,20H280V130H20Z" />
  </defs>
  <text>
    <textPath xlink:href="#shape">Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat.
      <animate attributeName="startOffset" from="-400" to="0" dur="10s" repeatCount="indefinite" />
    </textPath>
  </text>
</svg>

Answer 3

是的，您可以仅使用JavaScript将文本“包装”到SVG“路径”，然后可以使用Greensock的TweenMax这样的动画对其进行动画处理。文本将位于路径的“外部”。因此，如果您有一个对象，只需获取要使用的对象的周围“路径”即可。参见下面的示例，它提供了有关如何将文本添加到路径以及如何为该文本设置动画的详细信息。

document.getElementById("MyPath").setAttribute("d",document.getElementById("thePath").getAttribute("d"));
var tl = new TimelineMax({repeat:-1});
tl.from("#yourText",5,{attr:{startOffset:'100%'}});  
tl.to("#yourText",5,{attr:{startOffset:'-100%'}});  

body {
  background-color: #222;
}

svg {
  overflow: visible;
  left: 50%;
  top: 50%;
  position: absolute;
  margin: auto;
  transform: translate(-50%, -50%);
}

#yourText {
  font-size: 25px;
}

#thePath {
  fill: #5ca19c;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script>

<svg version="1.1" x="0" y="0px" width="200px" height="200px" viewBox="0 0 363.652 363.954" enable-background="new 0 0 363.652 363.954" xml:space="preserve">
    <defs><path id="MyPath"/></defs>
    <path id="thePath" stroke="#999" stroke-miterlimit="10" d="M515,269H31V30h484V269z"/>
    <text>
        <textPath id="yourText" fill='#88CE02' xlink:href="#MyPath" startOffset="0">Random Text to simulate the text your want to use Random Text to simulate the text your want to use.</textPath>
    </text>
</svg>