SVG - 笔划宽度的圆圈未填充铬

Question

我正在尝试在SVG中绘制圆圈,在chrome/opera和IE/firefox中有不同的结果.

附图显示了如何在chrome(左)和firefox(右)中绘制圆圈. .

<svg>
  <style>
    .circle { fill: #00FF00; stroke: #00FF00; stroke-width: 18px; }
  </style>
  <circle class="circle" cy="45" cx="390" r="1" />
</svg>

有没有办法如何强制铬填充像Firefox一样的圈子？

注意:我知道正确的解决方案在于"r"属性,但我想绘制圆宽"stroke-width"属性,因为它可以由css设置.在我的应用程序中,有很多圈子,我需要更改它们的大小和更改CSS属性比更改循环中每个圆圈的"r"属性要快得多.

Answer 1

您还可以通过 CSS 设置填充值。如果你想要一个实心圆，你应该使用它。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <circle class="circle" cy="45" cx="390" r="18" fill="#00FF00" />
    <circle class="circle" cy="85" cx="390" r="18" fill="none" stroke="#00FF00" stroke-width="1px" />
</svg>

显示相同：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <style>
        .circle {
            fill: #00FF00;
            stroke: #00FF00;
            stroke-width: 0;
        }
        .circle-stroke {
            fill: none;
            stroke-width: 1px;
        }
    </style>
    <circle class="circle" cy="45" cx="390" r="18" />
    <circle class="circle circle-stroke" cy="85" cx="390" r="18" />
</svg>

.circle-stroke您甚至可以通过在第二个示例中添加和删除类来在两种状态之间切换。