使用D3以背景图像填充svg

I've posted a few other questions about this and have now abandoned my previous bootstrap framework for a solid svg strip using D3.

我已经发布了一些关于这个的其他问题，现在已经放弃了以前的bootstrap框架，使用D3实现了一个完整的svg条。

My goal is to have 3 triangles masking 3 images, that are clickable to page anchor links only inside the triangles. (Ideally I want to add a transition-to-circle effect on hover also, but I'm not worried about that now).

我的目标是让3个三角形屏蔽3个图像，这些图像只能在三角形内部点击到页面锚点链接。(理想情况下，我还想在hover上添加一个过渡到圆形的效果，但我现在并不担心)。

I have the jsfiddle below so far, but can't manage to un-rotate the images inside the triangle, or make the background be just one single image instead of the cover like it is now. I tried CSS background-image also, but with no success.

到目前为止，我已经有了下面的jsfiddle，但是不能解除三角形内部的图像旋转，或者使背景仅仅是一个图像而不是现在的封面。我也尝试了CSS背景图像，但没有成功。

Here's a piece of my d3.js code, and a full jsfiddle below.

这是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/

Thank you for any time or help you can give to fix those images!

感谢您的任何时间或帮助您可以给予修复这些图像!

1 个解决方案

#1

If you want the patterns to fill the triangle, make them the same size as the triangle. Your pattern was 100x100, but your triangles were much bigger than that. So the pattern was repeating.

如果你想让这些图案填满这个三角形，让它们和这个三角形一样大。你的图案是100x100，但是你的三角形比这个大得多。所以这个模式在重复。

If you don't want your pattern fill to be rotated, don't rotate your triangle.

如果您不希望您的模式填充被旋转，不要旋转您的三角形。

If you don't want the images in your pattern squashed, define your pattern so it has the same aspect ratio. Your images are rectangular, but you were squishing them into a square shape (100x100).

如果不希望模式中的图像被压缩，请定义您的模式，使其具有相同的纵横比。你的图像是矩形的，但你把它们压成方形(100x100)。

Here's a fixed demo sample below. Complete fiddle here

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

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)");

#1