如果它们是单个形状，如何在 SVG 中绘制圆圈？

Question

我需要在 SVG 中绘制不确定数量的圆圈，就像它们是单个形状一样。使所有圆圈具有相同的填充颜色是行不通的，因为我需要在这些圆圈中应用滤镜，如图所示，并且您可以看到重叠区域的颜色不同。

<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

Answer 1

我想你现在拥有的是这样的，由于图案的半透明性，你可以看到重叠部分更暗：

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

作为一种可能的解决方案，您可以使用圆圈作为剪切路径并剪切一个大小为 svg canvas 的矩形，如下所示：

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

如果它们是单个形状，如何在 SVG 中绘制圆圈？

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

svg