Question

我一直在努力了解如何将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。我在IE10中看到过SVG的工作，所以也许唯一的问题是SVG和HTML的混合？不确定。

请注意在Safari中无法正常工作。

我的实施错了吗？有没有一种方法可以将SVG剪辑路径与我缺少的HTML元素混合在一起？

Answer 1

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

此方法创建相对剪辑路径，并在Safari中运行。

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

Answer 2

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

Answer 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（宽度：100％）我定义了一个svg，其条形宽度与主容器一样宽，同时使用viewBox我将其定义为一个内部尺寸为100x8的矩形。

您可以注意到，在svg中，所有内容都是相对于viewBox绘制的。 $ {normalizedValue}是一个变量，在我的情况下包含1到100之间的数字（没有'px'或'％'，只是一个数字），因此我不需要考虑大小。

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

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

3 个答案: