相关疑难解决方法(0)

我已经发布了一些关于此的其他问题，现在已经放弃了我以前使用 D3 的固体 svg 条的引导框架。

我的目标是让 3 个三角形掩盖 3 个图像，这些图像可单击以仅在三角形内翻页锚链接。（理想情况下，我还想在悬停时添加过渡到圆圈的效果，但我现在并不担心）。

到目前为止，我有下面的 jsfiddle，但无法设法取消旋转三角形内的图像，或者使背景只是一张图像，而不是像现在这样的封面。我也尝试过 CSS background-image，但没有成功。

这是我的 d3.js 代码的一部分，下面是完整的 jsfiddle。

var svg = d3.select(".mydiv").append("svg").attr("width",width).attr("height",height);

var defs= svg.append('defs')

defs.append('pattern')
    .attr('id', 'pic1')
    .attr('patternUnits', 'userSpaceOnUse')
    .attr('width', 100)
    .attr('height', 100)
  .append('svg:image')
    .attr('xlink:href', 'http://placehold.it/1749x1510')
    .attr("width", 100)
    .attr("height", 100)
    .attr("x", 0)
    .attr("y", -10);

svg.append("a")
    .attr("xlink:href", "http://www.google.com")
    .append('path')
    .attr("overflow","hidden")
    .attr("d", d3.svg.symbol().type("triangle-up").size(10000))
    .attr("transform", function(d) { return "translate(" + 300 + "," + 200 + ") rotate(0)"; })
    .attr("fill", "url(#pic1)");

http://jsfiddle.net/5Ldzk5w6/2/

感谢您在任何时间或帮助您修复这些图像！