A partial implementation of a polyfill for the SVG DOM improvement proposal so that people can get a feel of it.
Include <script src="new-svg-dom.js"></script> early on in your HTML
document. Then, you can write inline SVG using <graphics> elements.
You can point your <script> element to https://raw.githubusercontent.com/heycam/new-svg-dom/master/new-svg-dom.js if you want to avoid downloading the file.
There are four options for reflecting length-typed attributes, illustrated here by how x is reflected on a <rect> element:
- "string" (the default):
SVG2RectElement.xis a string that reflects the DOM attribute value - "string-or-number":
SVG2RectElement.xreturns a number (px value) on getting, and can be assigned a number or a string to be parsed as a CSS length - "number":
SVG2RectElement.xis a number that reflects the px value - "string-and-number":
SVG2RectElement.xreflects the DOM attribute value as a string, andSVG2RectElement.x_pxreflects it as a number (px value)
Set gLengthReflection to the desired option before loading new-svg-dom.js, for example:
<!DOCTYPE html>
<script>
var gLengthReflection = "string-and-number";
</script>
<script src="new-svg-dom.js"></script>
<graphics width="300" height="200">
<rect x="10" y="20" width="30" height="40"></rect>
</graphics>
<script>
function show(val) {
alert(val + " (" + typeof val + ")");
}
show(document.querySelector("rect").x); // alerts "10 (string)"
show(document.querySelector("rect').x_px); // alerts "10 (number)"
- Not every proposed DOM interface is implemented.
- Style sheets in the document are not applied to elements in the
<graphics>subtree, although a<style>element placed within the<graphics>will work, as long as the selectors do not need to match against any ancestors of the<graphics>. - Features that require local URL references, such as
<use href="#blah">, do not work. - Event listeners do not work.
- The script only works in a recent Firefox Nightly build that has the
dom.webcomponents.enabledpref set totrue. - All elements within a
<graphics>subtree must have explicit closing tags.