[英]Using D3 to fill an svg with a background image
我已經發布了一些關於此問題的其他問題,現在已經放棄了我之前使用D3的固體svg條帶的bootstrap框架。
我的目標是讓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)");
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.