Skip to content

Instantly share code, notes, and snippets.

@ariutta

ariutta/index.html

Last active December 30, 2015 04:29
Show Gist options
  • Save ariutta/7776406 to your computer and use it in GitHub Desktop.
Save ariutta/7776406 to your computer and use it in GitHub Desktop.
Download ZIP
d3.xml test case
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
width: 960px;
height: 500px;
position: relative;
}
</style>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var svg = d3.select("body").append("svg")
.attr("width", 1000)
.attr("height", 1000);
var defs = svg.append("defs");
var symbol = defs.append("symbol")
.attr("id", "oval-symbol");
d3.xml("oval.svg", "image/svg+xml", function(svgXml) {
var shape = d3.select(svgXml.documentElement)
var width = shape.attr('width');
var height = shape.attr('height');
symbol.attr('viewBox', '0 0 ' + width + ' ' + height);
var shapeChildren = shape[0][0].children;
var i = -1;
do {
i += 1;
symbol[0][0].appendChild(shapeChildren[i]);
} while (i < shapeChildren.length - 1);
});
</script>
Display the source blob
Display the rendered blob
Raw
oval.svg
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<?xml-stylesheet type="text/css" href="../../css/pathway-template.css"?>
<svg id="oval"
version="1.1"
baseProfile="full"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:ev="http://www.w3.org/2001/xml-events"
width="100"
height="100"
viewBox="0 0 100 50"
preserveAspectRatio="none"
class="node shape">
<clipPath id="oval-clip-path">
<ellipse id="oval-clip-path-ellipse" cx="50" cy="25" rx="50" ry="25" vector-effect="non-scaling-stroke"></ellipse>
</clipPath>
<ellipse id="oval-shape" cx="50" cy="25" rx="50" ry="25" style="clip-path: url(#oval-clip-path); " vector-effect="non-scaling-stroke"></ellipse>
</svg>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment