SVG 渲染不同答案

【问题标题】：SVG rendering is differentSVG 渲染不同
【发布时间】：2021-12-22 15:59:47
【问题描述】：

我不明白为什么 svg 在 Chrome 和 Opera 浏览器中用圆弧边缘之间的线绘制。 Firefox中没有行。线条不是一直可见，但在某些尺寸下，例如 93px、118px、129px 等。如何修复它的任何想法都需要没有线条。谢谢！

没有一行, 用一行

    * {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }

    .box {
        height: 93px;
        width: 93px;
        resize: both;
        overflow: hidden;
    }

    <div class="box">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
            <defs>
                <linearGradient id="a" y1="50" x2="100" y2="50" gradientUnits="userSpaceOnUse">
                    <stop offset="0" stop-color="#b79bc9" />
                    <stop offset="1" stop-color="#6e69b0" />
                </linearGradient>
            </defs>
            <path d="M12.43 29.58a41 41 0 0 1 58 58M82.84 100A58.58 58.58 0 0 0 0 17.16m12.43 12.42L0 17.16M82.84 100 70.42 87.57" style="fill:url(#a)" />
        </svg>
    </div>

【问题讨论】：

标签： html css svg

【解决方案1】：

对不起朋友，这是我的错，我做了一个糟糕的 svg。修复

    * {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }

    .box {
        height: 93px;
        width: 93px;
        resize: both;
        overflow: hidden;
    }

    <div class="box">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 99.38">
            <defs>
                <linearGradient id="a" x1="-16.8" y1="50" x2="100.51" y2="50" gradientUnits="userSpaceOnUse">
                    <stop offset="0" stop-color="#b79bc9" />
                    <stop offset="1" stop-color="#6e69b0" />
                </linearGradient>
            </defs>
            <path d="M41.6.31A58.18 58.18 0 0 0 0 17.74l14.56 14.34a38 38 0 1 1 54.08 53.27L83.2 99.69A58.39 58.39 0 0 0 41.6.31Z" transform="translate(0 -.31)" style="fill:url(#a)" />
        </svg>
    </div>

【讨论】：