在形状路径上写文字 [英] Write text on shape path

问题描述

有没有办法在js / css中的形状周围写文字？我尝试过SVG库，但是我没有找到一个可以在形状周围写的文本，而不是在里面。

我也希望文字在大帐篷中移动，但在2维，但这不是一个非常重要的额外功能。

我找到的解决方案是使用
提前致谢

解决方案

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

我使用的路径是矩阵长度的两倍，线圈的两倍。我正在设置 startOffset 的动画，当 startOffset 为50％时，我将其设为0％。

  let so = 0function Marquee（）{requestAnimationFrame（Marquee）tp.setAttributeNS（null 开始偏移，所以+ ％）; if（so> = 50）{so = 0;} so + = .05} Marquee（） 

  SVG {宽度：100vh;字体家庭：黑体} {路径行程：黑色; fill：none}  

 < svg viewBox =0 0 300 200> < path id =the_rectd =M20,20H280V180H20V20H280V180H20V20z/> < text stroke =＃000000font-size =20> < textPath id =tpxlink：href =＃the_rectstartOffset =0％>我也喜欢文字在大帐篷中移动，但在2维，但这不是一个额外的关键。 < / textPath> < / text>< / svg>  

Is there a way to write text around a shape in js/css? I tried SVG libraries but I didn't find one that could write text around a shape, not inside.

I'd also like the text to move like in a marquee but in 2 dimensions, but this is a not crucial extra feature.

A solution I found is to export from After Effect an animated SVG with Lottie/BodyMoving, the problem with this solution is responsiveness.

Here is an example. Thanks in advance

解决方案

I see there are already a few answers. This is mine:

The path I'm using i twice as long as the length of the rect and "coils" twice. I'm animating the startOffset and when the startOffset is at 50% I'm making it 0%.

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

Marquee()

svg{width:100vh;font-family:Helvetica}
path{stroke:black; fill:none}

<svg viewBox="0 0 300 200">
  <path id="the_rect" d="M20,20H280V180H20V20H280V180H20V20z" />
   <text stroke="#000000" font-size="20">
      <textPath id="tp" xlink:href="#the_rect" startOffset="0%">
            I'd also like the text to move like in a marquee but in 2 dimensions, but this is a not crucial extra.
      </textPath>
    </text>
</svg>

这篇关于在形状路径上写文字的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！