First experience with SVG

Hello list,

I just had my first experience with SVG, while trying to programmatically 
produce an interactive bar-chart like graph. All in all experience was 
positive, but I lost too much time trying to fix seemingly minor issues. 
I'm posting to this list just to summarize my experience and hopefully 
learn about ways to handle the issues in new versions of the standard.

I needed to write some text within <rect>. There was absolutely no way to 
display any tag within the <rect>. I tried applying various CSS styles on 
a <title> I had into the rect but it would never show (what I was 
expecting was that it would show anywhere I wanted on the page after 
setting "display:block;position:absolute").

So I resorted to separate <text> with adjusted coordinates. This was not 
ideal since coordinates and text were duplicated for both <rect> and 
<text> elements. And text would overflow the <rect> and overwrite the text 
of the nearby <rect>. Setting text's width had no effect. To actually 
restrict the text within the <rect> I had to use javascript to compare 
<rect>'s width with getBBox() for the text size. Pretty complex since 
<text> is not a child of <rect>, but a sibling together with various other 
texts/rects.

I think it would be ideal for <rect> to accept inner <text> nodes, and 
display them by default clipped within the <rect> and be able to set 
position of the text *relative* to the container.

On another note, I had trouble with horizontally stacked bars that looked 
like one big bar. No padding/margin style applies to <rect>. Am I supposed 
to change the coordinates of thousands rects just to put some gap between 
them?

Something else that would make my life really easier was having the (0,0) 
coords at the bottom left corner. I couldn't find any easy way so I put 
everything inside a <g transform="translate(0,500) scale(1,-1)">. 
Unfortunately translate(0,100%) didn't work for me so I had to make a 
compromise by using absolute numbers. But using scale(1,-1) really messed 
up text rendering afterwards, so I had to re-transform for every <text>.

Finally I needed a quick way to make the <rect>'s border stand out in 
front of adjacent <rect>s when I turned it on with :hover styling. Z-index 
CSS style didn't change anything, only the elements' order actually does. 
So I figured out I should dynamically reorder all rects and always put as 
last the mouseover one. I dumped that solution as too complex, so I never 
actually solved this one.


Summary wishlist:
  * <title> and <desc> inside <rect> should be visible anywhere on screen 
if the CSS style dictates this.
  * <text> within <rect> should be rendered relative to the <rect> and 
clipped according to its width.
  * Padding/margin and z-index style should apply to <rect>
  * An easy way to start coordinated at bottom left.


Thanks for reading this far,
Dimitris


P.S. All testing was performed mostly on Firefox 13 and less on latest 
Chrome.

Received on Wednesday, 20 June 2012 09:37:13 UTC