Search code examples
animationsvgtextbanner

How can I change the text of svg

I need help with a banner. How can I change the text if it is SVG. Here is the source [https://jsfiddle.net/1whr4xvj/][1] . Thanks

Solution

  • This one is a bit tricky. It looks like the "text" has been encoded as either a vector graphic or bitmap graphic and then base64 encoded. So for example, line 62 starts with:

    this.shape_1.graphics.f("#293E40").s().p("...");

    If you change that to

    this.shape_1.graphics.f("#FF0000").s().p("...");

    (i.e. change the color to red) then you can see that the "servicenow" text changes color. The p("...") part is a function that is being passed a base64-encoded string that represents the shape of the "s", "e", "r", "v", ... etc. in "servicenow".

    I think the source you linked to may be minified javascript, so the function names are obscuring the original names. Could this library be easeljs perhaps?

    If you want to change the text in this banner, unfortunately you'll need to figure out which base64 "data blob" corresponds with the text you want to change, and then replace it with a new "data blob" with your new lines/curves that can be interpreted as text.

    Another approach could be to find the un-minified javascript, and then it would become easier to modify that--for example, by calling other easeljs functions (if that's what this library is) made for displaying text, rather than these data blobs as vector graphics.