diff --git a/archive/v0.1.4/change-log.html b/archive/v0.1.4/change-log.html index 63e86976..99a917b1 100644 --- a/archive/v0.1.4/change-log.html +++ b/archive/v0.1.4/change-log.html @@ -65,6 +65,7 @@
oninput and onkeydown handlers #36v0.1.3 - maintenance
Also note that the config callback only runs after a rendering lifecycle is done. Therefore, you should not use config to modify controller and model values, if you expect these changes to render immediately. Changes to controller and model values in this fashion will only render on the next m.render or m.module call.
You can use this mechanism to attach custom event listeners to controller methods (for example, when integrating with third party libraries), but you are responsible for making sure the integration with Mithril's autoredrawing system is in place. See the integration guide for more information.
You can use Mithril to create SVG documents (as long as you don't need to support browsers that don't support SVG natively).
+Mithril automatically figures out the correct XML namespaces when it sees an SVG island in the virtual DOM tree.
+m("svg[height='200px'][width='200px']", [
+ m("image[href='foo.jpg'][height='200px'][width='200px']")
+])
+VirtualElement m(String selector [, Attributes attributes] [, Children children])
diff --git a/archive/v0.1.4/mithril.min.zip b/archive/v0.1.4/mithril.min.zip
index 7baeb5c1..50a4d74e 100644
Binary files a/archive/v0.1.4/mithril.min.zip and b/archive/v0.1.4/mithril.min.zip differ
diff --git a/docs/change-log.md b/docs/change-log.md
index d3a71734..a441484f 100644
--- a/docs/change-log.md
+++ b/docs/change-log.md
@@ -5,6 +5,7 @@
### News:
- added regression tests for reported bugs
+- added support for SVG
### Bug Fixes:
@@ -14,6 +15,8 @@
- fixed caching bug in links w/ config option attached [#43](https://github.com/lhorie/mithril.js/issues/43)
- fixed attribute update bug when an element has both `oninput` and `onkeydown` handlers [#36](https://github.com/lhorie/mithril.js/issues/36)
+---
+
[v0.1.3](/mithril/archive/v0.1.3) - maintenance
### News:
diff --git a/docs/mithril.md b/docs/mithril.md
index fe093005..8a35bb59 100644
--- a/docs/mithril.md
+++ b/docs/mithril.md
@@ -185,6 +185,18 @@ You can use this mechanism to attach custom event listeners to controller method
---
+You can use Mithril to create SVG documents (as long as you don't need to support browsers that don't support SVG natively).
+
+Mithril automatically figures out the correct XML namespaces when it sees an SVG island in the virtual DOM tree.
+
+```javascript
+m("svg[height='200px'][width='200px']", [
+ m("image[href='foo.jpg'][height='200px'][width='200px']")
+])
+```
+
+---
+
### Signature
[How to read signatures](how-to-read-signatures.md)
diff --git a/tests/mithril-tests.js b/tests/mithril-tests.js
index 166febb9..27b042aa 100644
--- a/tests/mithril-tests.js
+++ b/tests/mithril-tests.js
@@ -110,7 +110,8 @@ function testMithril(mock) {
test(function() {
var root = mock.document.createElement("div")
m.render(root, m("svg", [m("g")]))
- return root.childNodes[0].childNodes[0].nodeName === "G"
+ var g = root.childNodes[0].childNodes[0]
+ return g.nodeName === "G" && g.namespaceURI == "http://www.w3.org/2000/svg"
})
test(function() {
var root = mock.document.createElement("div")
diff --git a/tests/mock.js b/tests/mock.js
index 493cf337..7bfe1927 100644
--- a/tests/mock.js
+++ b/tests/mock.js
@@ -20,6 +20,7 @@ mock.window = new function() {
this[name] = value.toString()
},
setAttributeNS: function(namespace, name, value) {
+ this.namespaceURI = namespace
this[name] = value.toString()
},
getAttribute: function(name, value) {
@@ -28,7 +29,9 @@ mock.window = new function() {
}
}
window.document.createElementNS = function(namespace, tag) {
- return window.document.createElement(tag)
+ var element = window.document.createElement(tag)
+ element.namespaceURI = namespace
+ return element
}
window.document.createTextNode = function(text) {
return {nodeValue: text.toString()}
diff --git a/tests/svg.html b/tests/svg.html
index 5ce726c9..13a106b7 100644
--- a/tests/svg.html
+++ b/tests/svg.html
@@ -1,21 +1,81 @@
-
+
+ SVG test
+
+
Since it's not possible to test SVG functionality from a NodeJS environment, this page can be used to test it in a browser.
- There should be an HTML link labeled "HTML link", a SVG link labeled "SVG link", and a tilted blue square. The links should open in a new tab. All three items should display title tooltips.
+ This page should contain:
+
+ - an HTML link labeled "HTML link"
+ - an SVG link labeled "SVG link"
+ - a tilted blue square
+ - a cat picture from http://placekitten.com
+ - an animated line drawing
+ - a clock with the current time
+
+ The links should open in a new tab. All items should display title tooltips when hovered over.
+