D3 Examples - CSSOM/SVG Test

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
​
body {
  font: 14px Helvetica Neue;
  text-rendering: optimizeLegibility;
}
​
div {
  width: 960px;
  margin: auto;
}
​
th {
  font-family: Courier New;
  text-align: right;
  padding-left: 100px;
  padding-right: 10px;
}
​
rect {
  stroke: #000;
  fill: #eee;
}
​
    </style>
  </head>
  <body>
    <div id="div"></div>
    <script type="text/javascript">
​
var div = document.getElementById("div"),
    svg = div.appendChild(create("svg")),
    rect = svg.appendChild(create("rect"));
​
svg.setAttribute("width", 960);
svg.setAttribute("height", 400);
rect.setAttribute("x", "10%");
rect.setAttribute("y", "10%");
rect.setAttribute("width", "80%");
rect.setAttribute("height", "80%");
​
text("EXPECTED", {width: 768, height: 320});
text("getBBox()", svg.getBBox());
text("getBoundingClientRect()", svg.getBoundingClientRect());
text("getClientRects()[0]", svg.getClientRects()[0]);
​
function text(name, size) {
  document.body.appendChild(document.createElement("tr"))
      .appendChild(document.createElement("th"))
      .appendChild(document.createTextNode(name))
      .parentNode
      .parentNode
      .appendChild(document.createElement("td"))
      .appendChild(document.createTextNode(size.width + " \xd7 " + size.height));
}
​
function create(type) {
  return document.createElementNS("https://www.w3.org/2000/svg", type);
}
​
    </script>
  </body>
</html>
    