PDA

View Full Version : creating wrapping text in SVG



FlaminPhoenix
30 Jan 2012, 3:24 AM
Hi,

Since SVG doesn't support native wrapping of text in SVG, I tried creating wrapping text using a <foreignObject> tag instead to replace the


<text><tspan>...</tspan><text>

that makes up the svg of charts labels. The only problem is, DomHelper.createDom doesnt seem to honor the camel casing given in the tag property.


var foreignObject = Ext.DomHelper.createDom({

tag:'foreignObject',
dy:dy,
width:axisWidth,
style:style,
zIndex:zindex,
x:x,
y:y,
height:150,
font:font,
'text-anchor':textAnchor,
transform:transform,
hidden:hidden
});

as a result, the foreign object tags dont have the camel casing and chrome and firefox refuse to render these tags. I saved the svg XML as a .svg file and modified the <foreignobject> tags to <foreignObject> tags, and dropped the file in chrome, and it works flawlessly!

help?

mitchellsimoens
30 Jan 2012, 8:29 AM
This has nothing to do with Ext.DomHelper. Looking at the createDom method within Ext.dom.Helper it creates the element via:


el = doc.createElement(o.tag || 'div');

which returns el as a HTMLUnknownElement in Chrome. You can see it uses o.tag with no lowercasing.