SVG要素の領域塗りをオーバーラップさせる最適な方法は何ですか？

Question

SVGで基本的な画像操作を学び、次のチャレンジに対する最適なアプローチを見つけようとしています。さまざまなSVG要素（円、長方形、三角形）を持つSVGファイルが1つあります。彼らはすべて互いに重なっていて、異なる形の新しい「領域」を作り出しています（写真参照）。

実際の要素を塗りつぶすので、問題はありません。しかし、特定の交差領域だけを色で塗りつぶしたい場合はどうすればよいですか？

私の現在の考え方でした：

• は、私は一つの大きなパスとして全体の組成を治療し、その後、塗りつぶしルールで遊ぶことができるかどうか、その後、パスなど、すべての要素を描画することを検討してください。
• エリアの形状を計算し、その上に新しいシェイプを描画し、塗りつぶすことを検討してください。

• example of areas

Answer 1

あなたは、フィルタでこれを行うことができます。簡単に行うには、透明に近い塗りつぶしを使用してから、フィルターを使用してオーバーラップしない領域を完全に透明に、オーバーラップ領域を完全に不透明にします。それはストロークを少しクリスピーにします。

<svg height="600px" width="800px"> 
 
    <defs> 
 
     <filter id="opacitychange"> 
 
     <feComponentTransfer> 
 
      <feFuncA type="linear" intercept="-.05"/> 
 
      </feComponentTransfer> 
 
     <feComponentTransfer> 
 
      <feFuncA type="gamma" amplitude="4" exponent=".4"/> 
 
      </feComponentTransfer> 
 
     </filter> 
 
     </defs> 
 
    
 
    <g filter="url(#opacitychange)"> 
 
    <circle stroke="black" fill="blue" fill-opacity="0.05" cx="150" cy="150" r="100"/> 
 
    <rect stroke="black" x="200" y="100" width="100" height="300" fill="blue" fill-opacity="0.05"/> 
 
    <polygon stroke="black" points="50,50 50,400 300,400" fill="blue" fill-opacity="0.05"/> 
 
</g>  
 
    </svg>

Answer 2

マイケルのフィルタ法は、クールでトリッキーが、理解することが、おそらく少し難しいです。

マスクを使用することもできます。

<svg width="391" height="400"> 
 
    <defs> 
 
    <!-- define the shapes in the image, which we will use for the outlines 
 
     and for creating intersection masks --> 
 
    <rect id="square" x="92" y="48" width="218" height="218"/> 
 
    <polygon id="triangle" points="54,366 277,366 165,142"/> 
 
    <circle id="circle" cx="256" cy="264" r="85"/> 
 
    
 
    <!-- the masks --> 
 
    <!-- white parts are visible, black parts are invisible --> 
 
    <mask id="square-minus-triangle"> 
 
     <!-- square with triangle cut out of it --> 
 
     <use xlink:href="#square" fill="white"/> 
 
     <use xlink:href="#triangle" fill="black"/> 
 
    </mask> 
 
    <mask id="triangle-minus-square"> 
 
     <!-- triangle with square cut out of it --> 
 
     <use xlink:href="#triangle" fill="white"/> 
 
     <use xlink:href="#square" fill="black"/> 
 
    </mask> 
 
    </defs> 
 
    
 
    <!-- background --> 
 
    <rect width="100%" height="100%" fill="#e5e4da"/> 
 
    
 
    <!-- the intersection shapes (yellow) --> 
 
    <!-- first draw the circle, but use the square-minus-triangle mask.--> 
 
    <use xlink:href="#circle" fill="#e4e400" mask="url(#square-minus-triangle)"/> 
 
    <!-- draw the circle again, but use the triangle-minus-square mask.--> 
 
    <use xlink:href="#circle" fill="#e4e400" mask="url(#triangle-minus-square)"/> 
 
    
 
    <!-- draw the outlined shapes --> 
 
    <g fill="none" stroke="black" stroke-width="6"> 
 
    <use xlink:href="#square"/> 
 
    <use xlink:href="#triangle"/> 
 
    <use xlink:href="#circle"/> 
 
    </g> 
 
</svg>