SVGパスの描画と画像の埋め込み

Question

いくつかのsvgパスの理解と編集にはちょっとした助けが必要です。私は3つの同じ三角形（内部の画像）を描くのを助けられました。最初の2つの三角形を1つの連続する平行四辺形に変更したいと思います。私は数字を1トンで演奏していましたが、最終的には私が望む形になっていますが、画像は常に途中で途中で途中まで繰り返されます。私はイメージのアスペクト比を束にしましたが、無駄にしました。誰かが私が間違っていることを教えてもらえますか？ここにはjsFiddleと私のコードの例があります。

私はそこにいても構いませんが、平行四辺形は真ん中の三角形と同じ高さにする必要があります（それによって完全に覆います）。画像を繰り返さないようにする必要があります。これらの異なる.attrが物事にどのように影響しているかについての説明は、教育の観点から非常に有益です。

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://francomasoma.com/wp-content/uploads/2016/05/FullSizeRender_7-560x483.jpg') 
    .attr("width", 115.5) 
    .attr("height", 100) 
    .attr("x", 0) 
    .attr("y", 0); 


    defs.append('pattern') 
    .attr('id', 'pic2') 
    .attr('patternUnits', 'userSpaceOnUse') 
    .attr('width', 115.5) 
    .attr('height', 100) 
    .append('svg:image') 
    .attr('xlink:href', 'http://wire.kapitall.com/wp-content/image-import/92277513-560x483.jpg') 
    .attr("width", 115.5) 
    .attr("height", 100) 
    .attr("x", 0) 
    .attr("y", 0); 


    defs.append('pattern') 
    .attr('id', 'pic3') 
    .attr('patternUnits', 'userSpaceOnUse') 
    .attr('width', 115.5) 
    .attr('height', 100) 
    .append('svg:image') 
    .attr('xlink:href', 'http://gallery.ksotov.co.uk/main.php?g2_view=core.DownloadItem&g2_itemId=13225&g2_serialNumber=1') 
    .attr("width", 115.5) 
    .attr("height", 100) 
    .attr("x", 0) 
    .attr("y", 0); 



svg.append("a") 
    .append('path') 
    .attr("d", "M 0,0, 57.7,-100, 115.5,0z") 
    .attr("transform", "translate(135.5, 100)") 
    .attr("fill", "url(#pic1)"); 

svg.append("a") 
    .append('path') 
    .attr("d", "M 57.7,0, 0,-100, 115.5,-100z") 
    .attr("transform", "translate(67.7, 100)") 
    .attr("fill", "url(#pic2)"); 

svg.append("a") 
    .append('path') 
    .attr("d", "M 0,0, 57.7,-100, 183,-100, 125.5,0") 
    .attr("transform", "translate(0, 100)") 
    .attr("fill", "url(#pic3)"); 

Answer 1

単純に、パターントランスフォームを使用してイメージの縮尺を変更するだけです。また、正しく配置されるように高さを調整しました。

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://francomasoma.com/wp-content/uploads/2016/05/FullSizeRender_7-560x483.jpg') 
 
    .attr("width", 115.5) 
 
    .attr("height", 100) 
 
    .attr("x", 0) 
 
    .attr("y", 0); 
 

 

 
    defs.append('pattern') 
 
    .attr('id', 'pic2') 
 
    .attr('patternUnits', 'userSpaceOnUse') 
 
    .attr('width', 115.5) 
 
    .attr('height', 100) 
 
    .append('svg:image') 
 
    .attr('xlink:href', 'http://wire.kapitall.com/wp-content/image-import/92277513-560x483.jpg') 
 
    .attr("width", 115.5) 
 
    .attr("height", 100) 
 
    .attr("x", 0) 
 
    .attr("y", 0); 
 

 

 
    defs.append('pattern') 
 
    .attr('id', 'pic3') 
 
    .attr('patternUnits', 'userSpaceOnUse') 
 
    .attr('width', 115.5) 
 
    .attr('height', 75) 
 
    .attr('patternTransform', "scale(2)") 
 
    .append('svg:image') 
 
    .attr('xlink:href', 'http://gallery.ksotov.co.uk/main.php?g2_view=core.DownloadItem&g2_itemId=13225&g2_serialNumber=1') 
 
    .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)"); 
 

 
svg.append("a") 
 
    .attr("xlink:href", "http://www.wikipedia.com") 
 
    .append('path') 
 
    .attr("d", "M 57.7,0, 0,-100, 115.5,-100z") 
 
    .attr("transform", "translate(67.7, 100)") 
 
    .attr("fill", "url(#pic2)"); 
 

 
svg.append("a") 
 
    .attr("xlink:href", "#testanchor") 
 
    .append('path') 
 
    .attr("d", "M 0,0, 57.7,-100, 183,-100, 125.5,0") 
 
    .attr("transform", "translate(0, 100)") 
 
    .attr("fill", "url(#pic3)");

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> 
 
<div class="mydiv"> 
 
    </div>