使用D3用背景图像填充svg [英] Using D3 to fill an svg with a background image

问题描述

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

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

我的目标是有3三角形遮蔽3个图像，即可点击以仅在三角形内部的页面锚点链接。 （理想情况下，我想在悬停上添加一个过渡到圆效果，但我现在不担心）。

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).

我有下面的jsfiddle ，但是不能管理去旋转三角形内的图像，或者使背景只是一个单个图像，而不是现在的覆盖。我尝试了CSS background-image，但没有成功。

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.

下面是我的一个d3.js代码和一个完整的jsfiddle下面。

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

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/

感谢您的任何时间或帮助您解决这些图片！ / p>

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

推荐答案

如果你想要的图案填充三角形，使它们的大小与三角形相同。你的模式是100x100，但你的三角形比那更大。

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.

如果您不想旋转图案填充，请不要旋转三角形。

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

如果您不想压缩图案中的图像，请定义图案，使其具有相同的宽高比。您的图片是矩形的，但您已将其压缩成正方形（100x100）。

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).

以下是一个固定的演示示例。 完成小提示

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

这篇关于使用D3用背景图像填充svg的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！