gpt4 book ai didi

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

转载 作者:技术小花猫 更新时间:2023-10-29 11:44:38 27 4
gpt4 key购买 nike

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

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

<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”属性快得多。

最佳答案

即使在 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>

关于css - SVG - 具有笔划宽度的圆圈未填充 Chrome ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22299246/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com