Hi. I recently started discovering svg, mostly by falling in love with d3.js. I know that <text> has no background. It seems that question comes up on the net every once in a while and the consensus seems to be this: 'Draw a <rect> and put the <text> on top'.
That's - scary, because math is hard and I'd rather go shopping. On a more serious note: I have a text that is highly dynamic. Probably it's between 5 to 15 characters most of the time. Maybe. I layer that text on top of a graph (think workflow, states and arrows between them). Sometimes the text needs to be drawn in a place where a line/arrow is already. Bottom line: I want the text to be readable and therefor try to create a uniform background. Calculating the rect size would be possible but it seems that I'd need a lot of roundtrips (creating the text, grabbing the bounding box, creating/resizing the rect) where I so far had just simple mapping/data binding. I'd love to avoid that. Messing a lot with nested elements and filters I was happy to get a workaround that works fine in FF and Chrome, but fails in - you guessed it - IE9. FF and Chrome show me red text on yellow background. IE9 ignores the background. This is what I have, simplified of course: <svg xmlns="http://www.w3.org/2000/svg"; xmlns:xlink="http://www.w3.org/1999/xlink"; width="600" height="400"> <defs> <filter id="flood"> <feFlood flood-color="yellow" flood-opacity="0.75" result="flooded"/> <feMerge> <feMergeNode in="flooded"/> <feMergeNode in="SourceGraphic"/> </feMerge> </filter> </defs> <g class="workflowGroup"> <g id="SomeNode" transform="translate(345, 199.5)"> <rect class="station" fill="rgb(255,255,255)" x="-37" y="-26.5" rx="10" ry="10" width="74" height="53"/> <text y="9" fill="black" text-anchor="middle" dominant-baseline="mathematical" font-size="12">NodeName</text> <text y="35.5" filter="url(#flood)" fill="red" text-anchor="middle" dominant-baseline="mathematical" font-size="12">ThisIsMyProblem</text> </g> </g> </svg> By now I'm nearly ready to give up, but maybe someone on this list can help me with the following? - Is this a valid use of a filter? Are FF and Chrome _correct_ in doing what I want or did I stumble upon a happy glitch? - Is there anything obviously hindering IE to do what I want, period? - Any other creative ways to get a new background without lots of calculations (lots = per node) in javascript? Thanks a lot for any pointer, Ben ------------------------------------ ----- To unsubscribe send a message to: [email protected] -or- visit http://groups.yahoo.com/group/svg-developers and click "edit my membership" ----Yahoo! Groups Links <*> To visit your group on the web, go to: http://groups.yahoo.com/group/svg-developers/ <*> Your email settings: Individual Email | Traditional <*> To change settings online go to: http://groups.yahoo.com/group/svg-developers/join (Yahoo! ID required) <*> To change settings via email: [email protected] [email protected] <*> To unsubscribe from this group, send an email to: [email protected] <*> Your use of Yahoo! Groups is subject to: http://docs.yahoo.com/info/terms/
