使用D3用背景图像填充svg

Using D3 to fill an svg with a background image

本文关键字：填充 svg 图像 背景 D3 使用      更新时间：2023-09-26

我已经发布了一些关于这方面的其他问题，现在已经放弃了以前的bootstrap框架，转而使用D3构建一个坚实的svg条带。

我的目标是让3个三角形屏蔽3个图像，这些图像可以点击，只在三角形内定位链接。（理想情况下，我也想在悬停时添加一个圆圈效果的过渡，但我现在不担心）。

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

这是我的一段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/

感谢您为修复这些图像提供的任何时间或帮助！

如果希望图案填充三角形，请使其与三角形大小相同。你的图案是100x100，但你的三角形比这个大得多。所以这种模式在重复。

如果你不希望你的图案填充被旋转，不要旋转你的三角形。

如果你不希望你的图案中的图像被压扁，那么定义你的图案，使其具有相同的纵横比。你的图像是矩形的，但你把它们压扁成了正方形（100x100）。

下面是一个固定的演示示例。完整小提琴在这里

var width = 800;
var height = 200;

var svg = d3.select(".mydiv").append("svg")
                             .attr("width",width)
                             .attr("height",height)
                             .attr("viewBox", "0 0 250 100");
var defs= svg.append('defs')
defs.append('pattern')
    .attr('id', 'pic1')
    .attr('patternUnits', 'userSpaceOnUse')
    .attr('width', 115.5)
    .attr('height', 100)
  .append('svg:image')
    .attr('xlink:href', 'http://cammac7.github.io/img/portfolio/LRO.jpg')
    .attr("width", 115.5)
    .attr("height", 100)
    .attr("x", 0)
    .attr("y", 0);

svg.append("a")
    .attr("xlink:href", "http://www.google.com")
    .append('path')
    .attr("d", "M 0,0, 57.7,-100, 115.5,0z")
    .attr("transform", "translate(135.5, 100)")
    .attr("fill", "url(#pic1)");
相关文章：