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>

有没有办法强制chrome填充像firefox一样的圈子？

注意：我知道正确的解决方案在于“r”属性，但我想绘制圆宽“stroke-width”属性，因为它可以通过css设置。在我的应用中，有很多圈子，我需要更改它们的大小，更改CSS属性比更改循环中每个圆圈的“r”属性要快得多。

Answer 1

即使在Firefox中它也不好，尽管以不同的方式，例如部分弧：

<svg width="200" height="200" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <style>
        path {
            fill: green;
            stroke: green;
            stroke-width: 128;
            stroke-opacity: 0.5;
            stroke: url(#MyGradient);
        }
    </style>
    <defs>
        <linearGradient id="MyGradient">
            <stop offset="25%" stop-color="red"></stop>
            <stop offset="75%" stop-color="blue"></stop>
        </linearGradient>
    </defs>
    <path d="M84,62 a21,21 0 1,0 28,0"></path>
</svg>

Answer 2

您也可以通过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来在两种状态之间切换。