css - 位置：绝对时使用内联 SVG 剪辑错误元素的剪辑路径

Question

这有点难以解释，所以这里有一个jsFiddle来说明我的意思。

<style>
    .clip {
        clip-path: url(#clippath);
        -o-clip-path: url(#clippath);
        -moz-clip-path: url(#clippath);
        -webkit-clip-path: url(#clippath);
    }
</style>

<div id="container">
    <svg>
        <defs>
            <clippath id="clippath">
                <rect x="0" y="0" width="50" height="320" />
            </clippath>
        </defs>
    </svg>

    <div id="d1">Bottom</div>
    <div id="d2" class="clip">Middle</div>
    <div id="d3">Top</div>
</div>

问题是我想将剪辑路径应用于绝对定位的元素，但是我发现在 DOM 中出现在它之后的所有其他绝对定位的元素也将被剪辑。奇怪的是，相对定位的元素并非如此。

如何确保只剪裁所需的元素？我看不出我的代码有什么问题。这是一个错误吗？

Answer 1

这现在在我测试过的所有浏览器中都能正常运行，除了 Internet Explorer（它完全不支持 HTML 元素上的剪辑路径），因此它不再是问题。