Я создал образец приложения Asp.Net MVC 4, где я использовал D3.js для добавления SVG-элемента, а затем в SVG я добавил текстовый элемент (см. код ниже). Все это работает нормально, пока я не попытаюсь добавить img в SVG, используя локальный файл png. Img добавляется в DOM, но img не отображается на странице. Любые идеи, что я делаю неправильно здесь, и как это сделать?
@{
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 - Ниже приведена попытка сделать то же самое в прямом HTML, что дает мне тот же результат. Я не уверен в моем коде, чтобы получить файл refresh.png с локального диска таким образом.
<!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>