html - 使用 HTML 和 CSS 的 SVG 剪辑路径问题

Question

我一直在尝试了解如何将 SVG 剪辑路径应用于 HTML 元素，但遇到了一些奇怪的事情。

这是 fiddle :http://jsfiddle.net/jakemcgraw/8hr99/

<div id="diamond1" class="diamond">
    <div id="clip1">
        <div></div>
    </div>
</div>
<div id="diamond2" class="diamond">
    <div id="clip2">
        <div></div>
    </div>
</div>
<div id="diamond3" class="diamond">
    <div id="clip3">
        <div></div>
    </div>
</div>
<svg>
    <defs>
        <clippath id="relative_path">
            <polygon points="50% 0, 100% 50%, 50% 100%, 0 50%"></polygon>
        </clippath>
    </defs>
</svg>
<svg>
    <defs>
        <clippath id="absolute_path">
            <polygon points="100 0, 200 100, 100 200, 0 100"></polygon>
        </clippath>
    </defs>
</svg>

CSS:

#clip1 {
    -webkit-clip-path: polygon( 50% 0, 100% 50%, 50% 100%, 0 50% );
    -moz-clip-path: polygon( 50% 0, 100% 50%, 50% 100%, 0 50% );
    -o-clip-path: polygon( 50% 0, 100% 50%, 50% 100%, 0 50% );
    clip-path: polygon( 50% 0, 100% 50%, 50% 100%, 0 50% );
}

#clip2 {
    -webkit-clip-path: url(#relative_path);
    -moz-clip-path: url(#relative_path);
    -o-clip-path: url(#relative_path);
    clip-path: url(#relative_path);
}

#clip3 {
    -webkit-clip-path: url(#absolute_path);
    -moz-clip-path: url(#absolute_path);
    -o-clip-path: url(#absolute_path);
    clip-path: url(#absolute_path);
}

一些注意事项:

1. 内联 clip-path css 声明仅适用于 Chrome 和 Opera。

2. 具有相对尺寸(即 50%)的 SVG 似乎根本不适用于任何浏览器。

3. 具有绝对尺寸的 SVG 仅适用于 Firefox。

请注意，第二个和第三个元素在 Chrome 和 Opera 中完全消失了。现在，看看这个 fiddle :http://jsfiddle.net/jakemcgraw/7S5Lk/

这个在 Firefox 中工作正常，但在 Chrome 和 Opera 中，10px 的边距移动了底层元素，而不是剪辑。 SVG clipPath 尺寸似乎作为一个整体应用于文档，而不是所讨论的元素。

毫不奇怪，这两个 fiddle 在 IE10 中都不起作用。我已经看到 SVG 在 IE10 中工作，所以也许唯一的问题是 SVG 和 HTML 的混合？不确定。

还请注意，两者 都不能在 Safari 中工作。

我的实现有误吗？是否有适当的方法将 SVG 剪辑路径与我缺少的 HTML 元素混合？

Answer 1

诀窍是使用 clipPathUnits="objectBoundingBox" 并将您的点修改为边界框的比率。

此方法创建一个相对剪辑路径，并在 Safari 中工作。

请参阅以下 fiddle :http://jsfiddle.net/7S5Lk/6/