Jump to content

Search the Community

Showing results for tags 'pathlength'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • HTML5 / JS
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager

Categories

There are no results to display.


Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests

Found 1 result

  1. Hi ! I'm pretty new to SVG and struggling on some parts. I don't know how to center around a text path properly. To make it embrace the curved path, with dynamic length text (can be 5 letters or 25). I took @sdrasner workshop which was really helpful to gather some things quickly ! There are some cool things that I gathered on SVG Text Layout by Kurt Cagle blog post suggesting to use inlineSize. More Robust SVG Text was another resource, then I've tried startOffset="50%" text-anchor="middle" But none of them were giving me exactly what I wanted because the most important thing here is the width of the SVG text. Sarah talked (video #45) about a way of doing it with `stroke-dashoffset: -274` and with something like `document.querySelector('svg path')[0].getTotalLength()` but I do not get how the 2 can work in my case. The closest thing that I've achieved is this: TextPathAttributes, in pair with some ugly `tspan` as shown in my codepen... Yep, you guessed it, at that point I'm totally lost on what to try and I have to admit that the official documentation is pretty hard to get a grip on (too much things that I may not need ever)... So, to sum up my mess above, I want to: - get a centered text with something around 80/90% of the total arc width - wrap a longer sentence on 2 lines (the height static on the arc can stay static ofc) - still keep it responsive on desktop/mobile (should be ok since it's SVG) - as my draw below suggests, it will be on some kind of wheel and the text should keep the orientation aka face the opposite side of the center of the wheel - as far as I understood, I will not need DrawSVGPlugin, right ? 😅