How to draw circles in SVG like if they were a single shape?-CodePudding

I need to draw an indeterminate number of circles in SVG like if they were a single shape. Making all circles have the same fill color does not work because I need those circles to have a filter applied in them, like in the picture, and as you can see the overlapping areas are in a different color.

<pattern
  id="diagonalHatch"
  patternUnits="userSpaceOnUse" 
  width="1" 
  height="3" 
  patternTransform="rotate(-45 2 2)">
  <path
    d="M -1,2 l 6,0"
    [attr.stroke]="'#'   color"
    stroke-width=".5"
  />
</pattern>
<ng-container *ngFor="let cone of cones, index as i">
  <svg:circle
    fill="url(#diagonalHatch)"
    [attr.cx]="scaleX * (offset   cone.cX)"
    [attr.cy]="cone.cY"
    [attr.r]="scaleX * radius"
  />
</ng-container>

Result I am getting Result I need

CodePudding user response：

I suppose that what you have right now is something like this where due to the semitransparency of the pattern you can see the overlapped parts as darker:

<svg viewBox="0 0 100 50" width="400">
  <pattern
  id="diagonalHatch"
  patternUnits="userSpaceOnUse" 
  width="1" 
  height="3" 
  patternTransform="rotate(-45 2 2)">
  <path
    d="M -1,2 l 6,0"
    stroke="rgba(0, 100, 100, .3)"
    stroke-width="0.5"
  />
</pattern>
  <g>
  <circle  fill="url(#diagonalHatch)" r="20" cx="25" cy="25"/>
  <circle fill="url(#diagonalHatch)" r="20" cx="50" cy="25"/>
  <circle fill="url(#diagonalHatch)" r="20" cx="75" cy="25"/>
  </g>
</svg>

As a possible solution you could use the circles as a clipping path and clip a rectangle the size of the svg canvas like so:

<svg viewBox="0 0 100 50" width="400">
  <pattern
  id="diagonalHatch"
  patternUnits="userSpaceOnUse" 
  width="1" 
  height="3" 
  patternTransform="rotate(-45 2 2)">
  <path
    d="M -1,2 l 6,0"
    stroke="rgba(0, 100, 100, .3)"
    stroke-width="0.5"
  />
</pattern>
  <clipPath id="c">
  <circle r="20" cx="25" cy="25"/>
  <circle r="20" cx="50" cy="25"/>
  <circle r="20" cx="75" cy="25"/>
  </clipPath>
  
  <rect fill="url(#diagonalHatch)" width="100" height="50" clip-path="url(#c)"/>
</svg>