Embedded SVG in Protowidget

Terry Laurenzo on “Embedded SVG” —”So I fixed all of that and added real namespace support so that the Protowidget attributes are now part of their own namespace if using an XHTML document. If working in normal HTML, the pw.* syntax can still be used. There’s even a hack, so that if you use the “pw:” […]

Terry Laurenzo on “Embedded SVG” —”So I fixed all of that and added real namespace support so that the Protowidget attributes are now part of their own namespace if using an XHTML document. If working in normal HTML, the pw.* syntax can still be used. There’s even a hack, so that if you use the “pw:” prefix for your namespace, the parser will be able to work around IE’s deficiencies. I then added an SvgWidget to mirror the HTML DOMWidget (which in hindsight should have been named HTMLWidget). It’s basically a light version of the DOMWidget base class which leaves off the CSS class and style processing that does not apply (at least in the same way) to SVG elements.”

The end result was to change the example SVG to include some Protowidget attributes: <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500" height="500" baseprofile="full"> <g fill-opacity="0.7" stroke="black" stroke-width="0.1cm"> <circle cx="6cm" cy="2cm" r="100" fill="red" transform="translate(0,50)" pw:type="&rsquo;Svg.SvgWidget&rsquo;" pw:element.r="&rsquo;#{`Jitter1`}&rsquo;/"> <circle cx="6cm" cy="2cm" r="100" fill="blue" transform="translate(70,150)" pw:type="&rsquo;Svg.SvgWidget&rsquo;" pw:element.r="&rsquo;#{`Jitter2`}&rsquo;/"> <circle cx="6cm" cy="2cm" r="100" fill="green" transform="translate(-70,150)" pw:type="&rsquo;Svg.SvgWidget&rsquo;" pw:element.r="&rsquo;#{`Jitter3`}&rsquo;/"> </g> </svg>

Demo: SVG enabled browser | Read Complete article

ajaxian

Embedded SVG in Protowidget