当位置：绝对时，使用内联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元素的clippath），因此它不再是问题。