Hacker Newsnew | past | comments | ask | show | jobs | submitlogin

Working on it ... I have a couple of options, neither perfect, both require some time, but I may be able to do something.

Thanks.



If you can run a post-processing step on the SVG file before putting it on the server, the following might work. I took a look at the SVG, and although I don't know anything about SVG other than it is an XML format it looks pretty easy to add some text at a given location.

The white background seems to come from this:

  <polygon fill="white" stroke="transparent" points="-4,4 -4,-11651.5 3898,-11651.5 3898,4 -4,4"/>
We just need to find that in the SVG, look at the points defining the rectangle, find the left side and the top side from that list of points, then add some text. The left side is the minimum first coordinate in the set of points and the top is the minimum second coordinate in the set of points. That's -4 and -11651.5 in this case.

Then we just need to add text there:

  <text text-anchor="left" x="-4" y="-11637.5" font-family="Times,serif" font-size="14.00">Hello, World!</text>
Using the left side for x seems fine. For y using the top results in clipped text because apparently the y for text is the baseline. I don't know how font sizes work in SVG, but it looks like moving the base line down by font-size works nicely.

Here's a little Perl script that can be used as a filter that takes your SVG and adds that text line, finding the top and left by looking at the points list in the first polygon line that has fill set to "white" and stroke set to "transparent".

    #!/usr/bin/env perl
    use strict;

    my $left = 0;
    my $top = 0;
    while (<>) {
        print;
        if (m{<polygon.*fill="white"} && m{stroke="transparent"} && m{points="(.*?)"}) {
            my @points = split /\s+/, $1;
            foreach (@points) {
                my($x, $y) = split /,/;
                $left = $x if $x < $left;
                $top = $y if $y < $top;
            }
            $top += 14;
            print qq{<text text-anchor="left" x="$left" y="$top" font-family="Times,serif" font-size="14.00">Hello, World!</text>\n};
            last;
        }
    }
    print while (<>);


Yeah, I've done the post-processing SVG version and it works fine, until the chart itself does have a node near the top left, and then things overlap.

So I need to test whether they will overlap, and suddenly it's a bag-o-nails. Or at the least, need to test if something is up there and not both including the extra, but that's ... inelegant.

The option of having an HTML template and including the SVG will work, and that's the one I'm probably going to go with. It needs tweaking.


Another way to save the post-processing approach that would probably be easier than testing for something already up there would be to lower the top coordinate of the polygon of the white background by subtracting font-size. That would give you some new space on top for the text that should be free of anything else.

(Probably need slightly more than font-size, in case parts of some characters descend below the baseline).


Something to experiment with ... I hope to have time in a few days.

Thanks.




Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: