使用D3在SVG中填充背景图像

Question

使用D3在SVG中填充背景图像

javascripthtmlcsssvgd3.js

5

我之前发了几个有关此事的问题，现在放弃了之前的 Bootstrap 框架，转而使用 D3 来制作坚固的 SVG 条纹。

我的目标是创建 3 个三角形，遮盖 3 张图片，并通过单击该三角形只能链接到页面锚点 (anchor)。（理想情况下，我还想在悬停时添加一个过渡到圆圈的效果，但我现在不担心这个问题）。

到目前为止，我已经有了下面的 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/

感谢您能抽出时间并提供帮助来修复这些图像！

- singmotor

如果你旋转三角形，填充也会跟着旋转。这是无法避免的。 - Paul LeBeau

这为什么这么难啊？之前没有人尝试过用三角形来遮盖图像吗？旋转不是唯一的问题，图像也会映射得很奇怪。 - singmotor

我不确定你期望的是什么。你正在用一个大约是三角形高度一半的图案填充三角形，然后惊讶地发现它重复了？然后旋转三角形，你又惊讶地发现图案也跟着旋转了？ :) - Paul LeBeau

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Paul LeBeau · Accepted Answer

如果您想让图案填充三角形，请将它们的大小设置为与三角形相同。您的图案大小为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)");