[如果使用剪辑路径，则Svg会在边缘显示背景

Question

我有一个黄色矩形，背景为红色，如果我尝试使用多边形对其进行裁剪，则边缘会显示红色背景。

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="139px" height="154px" >
    <defs>
        <clipPath id="c1">
            <polygon points="10,10 20,10, 40,50, 50,100 90,90" />
        </clipPath>
    </defs>
    <g>

        <g clip-path="url(#c1">
            <path d="M 21.14 1.12 L 20.5 151 L 115.5 151 L 114.43 1.12 Z" fill="red" stroke="none" pointer-events="none" />
            <rect x="21.14" y="1.12" width="93.29" height="148.52" fill="#ebe078" stroke="none" pointer-events="none" />
        </g>
    </g>
</svg>

任何人都知道如何解决这个问题？我尝试过使用像脆皮的边缘：

HTML5 SVG anti-aliasing causes grey line between paths. How to avoid it?

但是仍然有同样的问题。谢谢。

Answer 1

通过用遮罩替换剪辑和剪辑路径解决的问题：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="139px" height="154px" >
    <defs>
        <mask id="c1">
            <polygon points="10,10 20,10, 40,50, 50,100 90,90" fill="white"/>
        </mask>
    </defs>
    <g>

        <g mask="url(#c1">
            <path d="M 21.14 1.12 L 20.5 151 L 115.5 151 L 114.43 1.12 Z" fill="red" stroke="none" pointer-events="none" />
            <rect x="21.14" y="1.12" width="93.29" height="148.52" fill="#ebe078" stroke="none" pointer-events="none" />
        </g>
    </g>
</svg>