Hey Yannik.
Thanks for getting back to me. My issue is really not a math problem. I just
don't currently have a good way to grab that element.
My graph is generated from d3 and updated from knockout.js. My point is - so
far this is 'magic'. To do as you suggest I need to remove that and do it the
manual way. Since the rest of the app works with these bindings only this feels
awkward and out of place in my context.
There's no setText of any sort. Do I really need to add it? That (bounding box
on every update and changing / inserting the rect) is The Only Way (tm)?
Thanks again,
Ben
--
Sent from my Android phone with K-9 Mail. Please excuse my brevity.
yannick.bocha...@free.fr wrote:
Hi Ben,
since the getBBox method returns a SVGRect object, it's only few lines of
javascript to create/update a rect element behind your text element, no math
and you can go shopping.
function setText(textElmt,str) {
textElmt.textContent = str;
var box = textElmt.getBBox();
var rect = document.createElementNS('http://www.w3.org/2000/svg','rect');
rect.setAttribute('class','yourCustomBackground');
for (var n in box) { rect.setAttribute(n,box[n]); }
textElmt.parentNode.insertBefore(rect,textElmt);
}
Yannick
----- Mail original -----
De: "Benjamin Podszun" <d...@darklajid.de>
À: svg-developers@yahoogroups.com
Envoyé: Jeudi 5 Avril 2012 17:05:42
Objet: [svg-developers] Trying to work around text's lack of a background
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
[Non-text portions of this message have been removed]
------------------------------------
-----
To unsubscribe send a message to: svg-developers-unsubscr...@yahoogroups.com
-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:
svg-developers-dig...@yahoogroups.com
svg-developers-fullfeatu...@yahoogroups.com
<*> To unsubscribe from this group, send an email to:
svg-developers-unsubscr...@yahoogroups.com
<*> Your use of Yahoo! Groups is subject to:
http://docs.yahoo.com/info/terms/
