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" <[email protected]>
À: [email protected]
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
------------------------------------
-----
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/
