dnfield / dart_path_parsing

MIT License
27 stars 7 forks source link

SVG Text to path parser? #11

Open large opened 8 months ago

large commented 8 months ago

Thank you for this great class! I have been using it to make an interactive map by extracting each path with great success. image

Now someone suggested that I put text in each path. By adding a text-element in the SVG it became a whole other ballgame.

Are there any known light-weigth parsers for SVG-text-elements to path? Tried to use the vectorgraphics but it failes on SKI (PathOps) and other errors, so it seems more complex to accomplish.

Any suggestions? (I am not so worried about the "costs" for rendering atm, just need a proof of consept.)

dnfield commented 8 months ago

If you edit the SVG file so that it contains appropriately positioned text, it should work in this library. That said, some features of text in SVG aren't impelmented here and will be really hard to get just right - at the moment, Flutter doesn't even expose support for them (for example, custom kerning, per letter rotation, some others as well).

I'm not quite sure what exactly you want to do though.

large commented 8 months ago

My goal was to have the SVG as a "template" for placement and looks, then manipulate the data before presentation. The path_parser will not work here, since the text elements are not paths.

Here is an example code for extracting paths:

    XmlDocument document = XmlDocument.parse(generalString);
    final paths = document.findAllElements('path');
    for (var element in paths) {
      String partPath = element.getAttribute('d').toString();
      Path path = parseSvgPathData(partPath);
    }

Same code for texts does not work, since it is not a path (this is just for example) :)

Texts are presented like this is SVG

  <text
     xml:space="preserve"
     id="se-SE2-text"
     style="white-space:pre;shape-inside:url(#rect1);fill:#000000;stroke-width:0.401;stroke-dasharray:none"
     transform="matrix(0.877261,-1.24479,1.40848,0.90017,-157.946,390.386)"><tspan
       x="286.95898"
       y="142.03516"
       id="tspan1">Tekst</tspan>
</text>

I can of course make this a path, but then it is not possible change text/data before presentation. Looking into an overlay with fixed positions, since this was more work than expected atm...

dnfield commented 8 months ago

The harder part is to get all the styling information right, which can change depending on where the node is in the document. Text is also a little weird in SVG, it can be encoded in a lot of different ways.