如何在 SVG 中绘制圆形，就像它们是单个形状一样？答案

【问题标题】：How to draw circles in SVG like if they were a single shape?如何在 SVG 中绘制圆形，就像它们是单个形状一样？
【发布时间】：2021-11-29 23:41:30
【问题描述】：

我需要在 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

【问题讨论】：

这能回答你的问题吗？ How can I merge two shapes in svg?
为什么不使用半透明的颜色来填充图案呢？然后重叠自然变暗。

标签： svg

【解决方案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 画布大小的矩形：

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

【讨论】：