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

Posted

技术标签:

【中文标题】SVG - 具有笔划宽度的圆圈未填充铬【英文标题】:SVG - circles with stroke-width are not filled in chrome 【发布时间】:2014-04-13 12:02:42 【问题描述】:

我正在尝试在 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”属性要快得多。

【问题讨论】:

刚刚快速浏览了 w3c 文档,我建议 chrome 实际上正在正确绘制圆圈。通过像您所做的那样设置r='1',这将为fillw3.org/TR/SVG11/shapes.html#CircleElement提供1px的半径 有趣。 Chrome 填充正确但笔划错误? 没有。这似乎是一个 Chrome 错误。它不应该是那样的。 FF 是对的。您应该考虑在code.google.com/p/chromium/issues 报告此错误,但请检查它是否尚未报告。 我不确定这是否是一个错误,因为opera和chrome一样。 FF 和 IE 有圆圈,Opera 和 chrome 没有。 它看起来确实是一个错误:请参阅提交的问题code.google.com/p/chromium/issues/detail?id=239860 和一个测试小提琴fiddle.skia.org/c/022251ed97b2c2e6c545c603035a271f——据我所知,这两个都是底层引擎问题。跨度> 【参考方案1】:

即使在 Firefox 中也不好,尽管方式不同,例如部分弧线:

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

【讨论】:

似乎是一个不同的问题(而不是问题的答案)。最好举报here【参考方案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- />
</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 在两种状态之间切换。

【讨论】:

这看起来像是一个解决方案,但不幸的是不适合我。就像我写的那样,我的应用程序中有很多圆圈,所以对我来说,为每个圆圈创建两个对象是不可接受的。我的圈子可以有大约 10 个状态,所以在我的情况下,这意味着对象要多 10 倍。 @Sylar ???你只需要一个圆圈——你只需要操作 CSS 类(在生成 SVG 时或在客户端使用 JS) @feeela:反之亦然,用.circle-stroke stroke-width: 101 试试你的例子——这真的不是它应该的样子,它是一个由笔划自身相交并有效地从里面

以上是关于SVG - 具有笔划宽度的圆圈未填充铬的主要内容,如果未能解决你的问题,请参考以下文章

从下到上逐渐填充一个圆圈swift2

使用 CSS 样式化 SVG 圆圈

SVG“填充”与“中风”重叠

如何从这个具有填充的复杂路径的 svg 更改为具有没有填充的简单路径的上述 svg?

SVG <g> 和 <text> 元素的默认宽度/边距/填充是多少?

具有完美定位的叠加层和顶部文本的内联 SVG 元素