Menu
I've created a sample Asp.Net MVC 4 application where I've used D3.js to append an SVG element and then inside the SVG I've appended a text element (see code below). This all works fine until I try to append an img to the SVG using a local png file. The img gets appended to the DOM, but the img is not rendered on the page. Any ideas what I'm doing wrong here, and how to go about fixing it?
@{ ViewBag.Title = "Home Page"; } <script src="~/Scripts/d3.v3.js"></script> <script type="text/javascript"> var svg = d3.select("body") .append("svg") .attr("width", 200) .attr("height", 100) .style("border", "1px solid black"); var text = svg.selectAll("text") .data([0]) .enter() .append("text") .text("Testing") .attr("x", "40") .attr("y", "60"); var imgs = svg.selectAll("img").data([0]); imgs.enter() .append("img") .attr("xlink:href", "@Url.Content("~/Content/images/icons/refresh.png")") .attr("x", "60") .attr("y", "60") .attr("width", "20") .attr("height", "20"); </script> @Richard Marr - Below is an attempt to do the same thing in straight HTML, which gives me the same result. I'm not sure about my code to get the refresh.png file from the local drive this way.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <script src="http://d3js.org/d3.v2.js"></script> </head> <body> <script type="text/javascript"> var svg = d3.select("body") .append("svg") .attr("width", 200) .attr("height", 100) .style("border", "1px solid black"); var text = svg.selectAll("text") .data([0]) .enter() .append("text") .text("Testing") .attr("x", "40") .attr("y", "60"); var imgs = svg.selectAll("img").data([0]); imgs.enter() .append("svg:img") .attr("xlink:href", "file:///D:/d3js_projects/refresh.png") .attr("x", "60") .attr("y", "60") .attr("width", "20") .attr("height", "20"); </script> </body> </html> 
669
SVG stands for Scalable Vector Graphics. SVG is an XML-based vector graphics format. It provides options to draw different shapes such as Lines, Rectangles, Circles, Ellipses, etc. Hence, designing visualizations with SVG gives you more power and flexibility.
SVG is text-based, and it is an image format that is vector-based. SVG is the same as the HTML structure. It can be illustrated as the DOM (Document Object Model). The properties of SVG can be described as attributes.
An SVG line element is represented by <line> tag. A line's attributes are: x1: This is the x-coordinate of the first point. y1: This is the y-coordinate of the first point.
nodeEnter.append("svg:image") .attr('x', -9) .attr('y', -12) .attr('width', 20) .attr('height', 24) .attr("xlink:href", "resources/images/check.png") In SVG (contrasted with HTML), you will want to use <image> instead of <img> for elements.
Try changing your last block with:
var imgs = svg.selectAll("image").data([0]); imgs.enter() .append("svg:image") ... If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
