Re: First experience with SVG

Hello :)

Thnaks for sharing your thought. As a web developer I faced some of the
issue you rised here as well.

2012/6/20 Dimitrios Apostolou <jimis@gmx.net>

> 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").
>

Yes but this an expected behavior as per the SVG 1.1 spec. <title> and
<desc> are meta-data and are not supposed to be displayed to the user
directly.


> 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.
>

This is a common mistake for people who come from HTML. SVG is not HTML in
the sens that SVG have no notion of "text flow". Basically, in an SVG
document, everything is absolutely positioned and each element never react
to the position of another element (there is some exception with element
within <text> element but it's really at the edge).


> 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.
>

Yes, I agree and there is plan for such a feature in SVG 2 :
http://www.w3.org/Graphics/SVG/WG/wiki/SVG2_Requirements_Input#Text_flow_to_arbitrary_shapes


> 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?
>

Yes, as I said before : no flow in SVG so padding and margin are irrelevant.


> 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>.
>

This is a mater of taste and this will be hard to change because all user
agent implement the coordinate system that way. However it could be
possible to discuss an explicite way to define the direction of the
coordinate système. Feel free to make any detailed suggestion on that
matter.


> 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.
>

Yes, and this z-index madness will be adressed FTW in SVG 2 :
http://www.w3.org/Graphics/SVG/WG/wiki/SVG2_Requirements_Input#z-index

Cheers :)
-- 
Jeremie
.............................
Web : http://jeremie.patonnier.net
Twitter : @JeremiePat <http://twitter.com/JeremiePat>