PDA

View Full Version : Advanced SVG Supported?



elsbree
2 Aug 2012, 8:57 AM
I'm trying to draw some fairly complex objects with ExtJS' built-in SVG support, and I've been running into some trouble. Does ExtJS not support obscure properties like fill-rule and text-anchor? I've been unable to get either of these properties to apply to sprites correctly. I'm hesitant to file a bug report in case there's some way to do this that I'm missing.

As an example: using the TryIt editor (http://www.w3schools.com/svg/tryit.asp?filename=trysvg_circle) I can make a cut out circle inside a square with the path "M10 10h50v50h-50z M23 35a14 10 0 1 1 0 0.0001 z" and the fill-rule property set to "evenodd." When I try to do the same with an ExtJS path sprite, the circle is filled as well.

scottmartin
2 Aug 2012, 1:17 PM
Does this example help:
http://dev.sencha.com/deploy/ext-4.1.0-gpl/examples/draw/Tiger.html

Scott.

elsbree
2 Aug 2012, 1:24 PM
Does this example help:
http://dev.sencha.com/deploy/ext-4.1.0-gpl/examples/draw/Tiger.html

Scott.

No, unfortunately not. The SVG in that example only uses the properties path, stroke, stroke-width, and fill, as far as I can tell. I'm trying to use properties other than these that are in the SVG documentation. What would be most useful is the text-anchor property: https://developer.mozilla.org/en/SVG/Attribute/text-anchor. I'd be surprised if ExtJS didn't implement it or at least have some similar property.

scottmartin
2 Aug 2012, 2:00 PM
SVG is not my area .. but in jumping around the source, I see 'text-anchor' used several times. That leads me to believe that it is supported ;)

Scott.

elsbree
2 Aug 2012, 4:16 PM
It appears that at least text-anchor is supported, but it has to be set when the sprite is created through the config. Setting it afterward through sprite["text-box"] = "end" does nothing.

elsbree
3 Aug 2012, 9:46 AM
It appears that at least text-anchor is supported, but it has to be set when the sprite is created through the config. Setting it afterward through sprite["text-box"] = "end" does nothing.

Woops, wrong again. You have to use the setStyle method of the sprite. Sprite.setStyle("text-anchor", "start") works.