Skip to content

Instantly share code, notes, and snippets.

@aogriffiths
Created June 13, 2012 06:23
Show Gist options
  • Save aogriffiths/2922252 to your computer and use it in GitHub Desktop.
Save aogriffiths/2922252 to your computer and use it in GitHub Desktop.
d3 svg images
<?xml version="1.0" encoding="UTF-8"?>
<projectDescription>
<name>2922252-d3-svg-images</name>
<comment></comment>
<projects>
</projects>
<buildSpec>
</buildSpec>
<natures>
</natures>
</projectDescription>
Demonstrates displaying images within svg
see it more clearly at http://bl.ocks.org/2922252
<html lang="en">
<head>
<title>D3 Transitions</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<!-- JS -->
<!--
<script type="text/javascript" src="https://raw.github.com/mbostock/d3/master/d3.min.js"></script>
-->
<script type="text/javascript" src="../2902093/d3.js"></script>
<script type="text/javascript" src="main.js"></script>
</head>
<body>
<style type="text/css" media="screen">
path {
fill: #fff;
stroke: #000;
stroke-width: 2px;
}
</style>
<div id="vis"></div>
<script type="text/javascript">
main();
</script>
</body>
</html>
function main() {
var svg = d3.select("#vis").append("svg")
.attr("width", 800)
.attr("height", 600);
//PNG, JPEG or SVG
var i = svg
.append("image")
.attr("x",20)
.attr("y",20)
.attr("height",50)
.attr("width",50)
.attr("xlink:href","./icon.png");
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment