重叠SVG元素区域填充的最佳方法是什么？

Question

我正在研究SVG的一些基本图像处理,并试图找到以下挑战的最佳方法:

我们有一个SVG文件,它有各种SVG元素(圆形,矩形,三角形).它们彼此重叠,形成了不同形式的新"区域"(见图).

所以填充实际元素 - 没有问题.但是,如果我只想填充特定的交叉区域的颜色呢？

我目前的想法是:

• 考虑将所有元素绘制为路径,然后查看是否可以将整体构图视为一个大路径,然后使用填充规则.
• 考虑计算区域形状并在其上绘制新形状,然后填充它.

• 考虑其他事情？

  区域的例子

Answer 1

Michael的过滤方法很酷且很棘手,但也许有点难以理解.

你也可以用面具做.

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

Answer 2

您可以使用过滤器来做到这一点。一种简单的方法是使用接近透明的填充，然后使用滤镜将非重叠区域转为完全透明，将重叠区域转为完全不透明。不过，它使笔画有点脆。

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