Svg clipPath位置

Question

对于下图，我试图剪掉所有不在显示的黑框中的内容。

但我执行了clipPath操作和feMorphology过滤器来显示剪切框的绘制位置。剪辑路径未显示在正确的位置。

这是生成的svg XML

<svg id="SvgjsSvg1006" width="550" height="650" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs">
    <defs id="SvgjsDefs1007">
        <clipPath id="SvgjsClipPath1017">
            <rect id="SvgjsRect1014" width="315" height="600" x="120" y="27"></rect>
        </clipPath>
        <filter id="dilate_shape">
            <feMorphology operator="dilate" in="SourceGraphic" radius="5" />
        </filter>
    </defs>
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="550" height="650" viewBox="0 0 550 650" xml:space="preserve">
        <g transform="translate(285 325)">
            <g filter="url(&quot;#dilate_shape&quot;)">
                <rect x="-325" y="-325" height="650" width="650" fill="lightgreen" clip-path="url(&quot;#SvgjsClipPath1017&quot;)"></rect>
            </g>
            <image xlink:href="https://i.imgur.com/xOOB2O4.png" x="-325" y="-325" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;" width="650" height="650" clip-path="url(&quot;#SvgjsClipPath1017&quot;)"></image>
        </g>
    </svg>

如果我删除translate转换并将其值添加到子图像标记的x和y值中，我可以解决此问题。如下所示

XML是

<svg id="SvgjsSvg1006" width="550" height="650" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs">
    <defs id="SvgjsDefs1007">
        <clipPath id="SvgjsClipPath1017">
            <rect id="SvgjsRect1014" width="315" height="600" x="120" y="27"></rect>
        </clipPath>
        <filter id="dilate_shape">
            <feMorphology operator="dilate" in="SourceGraphic" radius="5" />
        </filter>
    </defs>
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="550" height="650" viewBox="0 0 550 650" xml:space="preserve">
        <g >
            <g filter="url(&quot;#dilate_shape&quot;)">
                <rect x="-40" y="0" height="650" width="650" fill="lightgreen" clip-path="url(&quot;#SvgjsClipPath1017&quot;)"></rect>
            </g>
            <image xlink:href="https://i.imgur.com/xOOB2O4.png" x="-40" y="0" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;" width="650" height="650" clip-path="url(&quot;#SvgjsClipPath1017&quot;)"></image>
        </g>
    </svg>

那么如何解决这个问题而不必将变换值添加到X和Y位置。需要注意的一点是我正在使用fabricJs（它是一个用于从canvas转换为svg输出的canvas库）。因此，转换发生时会自动应用转换。因此，在转换发生时，随后修改变换值会影响其他图像