Напишите текст на пути формы

Question

Есть ли способ написать текст вокруг фигуры в js / css? Я пробовал библиотеки SVG, но не нашел такой, которая могла бы писать текст вокруг формы, а не внутри .

Я бы также хотел, чтобы текст двигался, как в выделении, но в двух измерениях, но это не является критически важной дополнительной функцией.

Решение, которое я нашел, - экспортировать из After Effects анимированный SVG с Lottie / BodyMoving , проблема с этим решением - отзывчивость.

Вот пример. Заранее спасибо

Answer 1

Да, вы можете «обернуть» текст в «путь» SVG, используя только JavaScript, а затем вы можете анимировать его, используя что-то вроде TweenMax от Greensock. Текст будет вдоль «снаружи» пути. Так что, если у вас есть объект, просто получите окружающий «путь» этого объекта для использования. Смотрите пример ниже, который я сделал, он дает подробную информацию о том, как добавить текст в путь, а затем, как анимировать этот текст.

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>

Answer 2

Я вижу, что уже есть несколько ответов. Это мое:

Путь, который я использую, в два раза больше длины прямоугольника и «витков». Я анимирую startOffset, а когда startOffset на 50%, я делаю его на 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>

Answer 3

Элемент 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>