1

SVG要素を塗りつぶす方法としてハッチパターンを発見しました（私は初心者です）。

見た目がとても気に入っています。ただし、要素が重なっている場合は、塗りつぶしの不透明度が 1 未満の単色の塗りつぶしを使用した場合と同様に、交差領域に「より密な」塗りつぶしを表示したいと考えています。

ただし、重なっている要素 (境界線を除く) は、同じ布から切り取られたように見えます。

d3 で作成された 2 つの四角形の例を次に示します。

var svg = d3.select("body").append("svg");

svg.append('defs')
    .append('pattern')
    .attr('id', 'diagonalHatch')
    .attr('patternUnits', 'userSpaceOnUse')
    .attr('width', 8)
    .attr('height', 8)
    .append('path')
    .attr('d', 'M-2,2 l4,-4 M0,8 l8,-8 M6,10 l4,-4')
    .attr('stroke', "red")
    .attr('stroke-width', 1);

svg.append("rect")
    .attr("x", 20)
    .attr("y", 20)
    .attr("width", 200)
    .attr("height", 100)
    .attr('fill', 'url(#diagonalHatch)')
svg.append("rect")
    .attr("x", 106)
    .attr("y", 50)
    .attr("width", 200)
    .attr("height", 100)
    .attr('fill', 'url(#diagonalHatch)')

http://jsfiddle.net/saipuck/DQfCp/2/

作成した各四角形が同じように塗りつぶされ、交差点にコントラストが作成されることを何とか望んでいましたが、残念ながら、それは起こりません!

これは私の最初の SO の質問です。より良い質問をする方法についてのフィードバックも喜んで受け付けます。ありがとう！

4

1 に答える 1

1

問題は、パターンが 2 つの長方形と同じ座標空間にあることです。

必要な効果を実現する 1 つの方法は、変換を使用して 2 つの四角形をパターンとは異なる座標空間に配置することです。

var svg = d3.select("body").append("svg");

svg.append('defs')
    .append('pattern')
    .attr('id', 'diagonalHatch')
    .attr('patternUnits', 'userSpaceOnUse')
    .attr('width', 8)
    .attr('height', 8)
    .append('path')
    .attr('d', 'M-2,2 l4,-4 M0,8 l8,-8 M6,10 l4,-4')
    .attr('stroke', "red")
    .attr('stroke-width', 1);

svg.append("rect")
    .attr("transform", "translate(20,20)")
    .attr("width", 200)
    .attr("height", 100)
    .attr('fill', 'url(#diagonalHatch)')
svg.append("rect")
    .attr("transform", "translate(106,50)")
    .attr("width", 200)
    .attr("height", 100)
    .attr('fill', 'url(#diagonalHatch)')

デモはこちら: http://jsfiddle.net/DQfCp/4/

于 2013-10-06T01:50:43.060 に答える