使用 HTML 和 CSS 的 SVG 剪辑路径问题答案

【问题标题】：Problems with SVG clip-path using HTML and CSS使用 HTML 和 CSS 的 SVG 剪辑路径问题
【发布时间】：2013-12-24 15:50:53
【问题描述】：

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

这里是小提琴：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);
}

需要注意的几点：

内联剪辑路径 css 声明仅适用于 Chrome 和 Opera。
具有相对尺寸（即 50%）的 SVG 似乎根本不适用于任何浏览器。
具有绝对尺寸的 SVG 仅适用于 Firefox。

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

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

不出所料，这两个小提琴在 IE10 中都不起作用。我已经看到 SVG 在 IE10 中工作，所以唯一的问题可能是 SVG 和 HTML 的混合？不确定。

请注意，两者都在 Safari 中不起作用。

我的实现有错吗？有没有合适的方法来混合 SVG 剪辑路径和我缺少的 HTML 元素？

【问题讨论】：

标签： html css svg clip

【解决方案1】：

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

此方法创建相对剪辑路径，适用于 Safari。

请参阅以下小提琴：http://jsfiddle.net/7S5Lk/6/

【讨论】：

其他人注意到虽然这个小提琴效果很好，但如果您尝试将两个剪切的图像放在一个页面中，它在 webkit 浏览器中会失败？一张图片被剪掉，其余的就消失了。

【解决方案2】：

将clipPathUnits="objectBoundingBox" 添加到clip-path 是解决方案。但是，如果同一页面中有多个钻石，safari（6.1 版）似乎只显示第一个并剪辑其他钻石（chrome 和 firefox 按预期显示所有钻石）。

【讨论】：

【解决方案3】：

我不确定它是否会回答您的问题，但我的替代解决方案是使用 svg 标记的 viewBox 属性，而不是为剪辑路径分配百分比。

这里是一个简单的例子：

<svg viewBox='0 0 100 8' style="width: 100%;">
    <defs>
        <clipPath id="clippy">
            <rect x="${normalizedValue}" y="0" width="2" height="8" />
        </clipPath>
    </defs>
    <rect x="0" y="0" width="100" height="8" fill="red" clip-path="url(#clippy)" />
</svg>

使用 css (width: 100%) 我定义了一个 svg，它的条形与主容器一样宽，同时使用 viewBox 我将它定义为一个内部大小为 100x8 的矩形。

如您所见，在 svg 中，所有内容都是相对于 viewBox 绘制的。 ${normalizedValue} 是一个变量，在我的例子中包含一个介于 1 和 100 之间的数字（没有 'px' 或 '%'，只是一个数字），因此我不必考虑大小。

也许这种方法可以帮助您，您只需创建许多大小相同的 svg（使用 css）并使用视图框轻松保持相同的比例。

【讨论】：