css - 在位置 :absolute 时使用内联 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)，因此它不再是一个问题。