Last active
August 29, 2015 14:06
-
-
Save dobbs/af2b436fc169a1d39e01 to your computer and use it in GitHub Desktop.
Examples of d3 and SVG <foreignObject> that don't work right
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <html> | |
| <head> | |
| <title>grids</title> | |
| <script src="http://d3js.org/d3.v3.min.js" type="text/javascript"></script> | |
| <style type="text/css"> | |
| svg {border: 1px solid #d0d0d0;} | |
| </style> | |
| </head> | |
| <body> | |
| <script type="text/javascript"> | |
| (function() { | |
| var div; | |
| div = d3.select("body").append("div").style("width", "210px"); | |
| (function() { | |
| var svg = div.append("svg").attr("width", 200).attr("height", 90); | |
| svg.append("foreignObject") | |
| .attr("x", 5).attr("y", 0) | |
| .attr("width", 80).attr("height", 90) | |
| .append("xhtml:body").append("p").text("webkit leaves me on the left?"); | |
| // the following select() works in firefox which correctly changes x | |
| // chrome and safari do not change x | |
| svg.select("foreignObject").attr("x", 120); | |
| })(); | |
| (function() { | |
| var svg = div.append("svg").attr("width", 200).attr("height", 50); | |
| // the following append() changes the DOM in chrome, safari, and firefox, looking at their inspectors | |
| // but none of them display this text | |
| svg.append("foreignobject") | |
| .attr("x", 50).attr("y", 5) | |
| .attr("width", 80).attr("height", 40) | |
| .append("xhtml:body").append("p").text("Why am I invisible?"); | |
| })(); | |
| (function() { | |
| var svg = div.append("svg").attr("width", 200).attr("height", 510); | |
| svg.append("foreignObject") | |
| .attr("x", 50).attr("y", 0) | |
| .attr("width", 120).attr("height", 40) | |
| .append("xhtml:body").append("p").text("ooh! ooh! ooh! select me!"); | |
| // none of firefox, chrome, nor safari change the text, so select() by lowercase doesn't work. | |
| svg.select("foreignobject").text("can't select by lowercase, either."); | |
| })(); | |
| }).call(this); | |
| (function() { | |
| window.helloText = function() { | |
| return "Hello, World!"; | |
| }; | |
| window.hello = function() { | |
| var html; | |
| html = JST["app/templates/hello.us"]({ | |
| text: helloText() | |
| }); | |
| return document.body.innerHTML += html; | |
| }; | |
| }).call(this); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment