svg 中圆的双描边颜色

Question

这就是我用描边没有填充画圆的方法

fill: none !important;
stroke-width: 1px;

我要双冲

Answer 1

遗憾的是，您无法将 SVG 设置为双笔划，只能设置虚线或实线笔划。

相反，只需创建一个完全相同的元素，但根据需要减少它的 size/radius。

.circle {
  fill: none;
  stroke: black;
}

<svg height="100" width="100">
  <circle class="circle" cx="50" cy="50" r="40" stroke-width="1" />
  <circle class="circle" cx="50" cy="50" r="38" stroke-width="1" />
</svg>

Answer 2

如果有人有兴趣使用 squares/rectangles 并且没有多个 <rect> 或 <circle> 条目，您可以使用 outline 属性以实现 SVG 中的双线边框和 border-radius 属性以使其与圆圈一起使用。

.double {
  fill: none;
  stroke: red;
  outline: 4px double black;
  outline-offset: 2px;
}
.circle {
  border-radius: 50%;
}

<svg height="100" width="200">
  <rect class="double" height="50" width="50" x='25' y='25' />
  <circle class="double circle" r="25" cx='150' cy='50' />
</svg>

Answer 3

要添加另一个更通用的解决方案：

这也可以通过应用 dilate to expand the element by radius= in all directions, and then composite xor 源并一起膨胀以仅留下两者之间的差异的过滤器来完成。

<svg width="600">
  <filter id="dilate-and-xor">
    <feMorphology
      in="SourceGraphic"
      result="dilate-result"
      operator="dilate"
      radius="1"
    />
    <feComposite
      in="SourceGraphic"
      in2="dilate-result"
      result="xor-result"
      operator="xor"
    />
  </filter>

  <circle
    class="circle"
    cx="450"
    cy="50"
    r="40"
    stroke="black"
    stroke-width="5"
    fill="none"
    filter="url(#dilate-and-xor)"
  />

  <rect
    class="circle"
    x="250"
    y="20"
    width="50"
    height="50"
    stroke="black"
    stroke-width="5"
    fill="none"
    filter="url(#dilate-and-xor)"
  />
  
  <path 
    d="M 10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" 
    stroke="black" 
    fill="transparent"
    stroke-width="5"
    filter="url(#dilate-and-xor)"
  />
</svg>

svg 中圆的双描边颜色

Double stroke color of circle in svg

css

svg

css-shapes