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

我一直试图理解如何将SVG片段路径应用于HTML元素，但遇到了一些奇怪的问题

这是小提琴：

需要注意的几点：

内联剪辑路径css声明仅适用于Chrome和Opera

相对尺寸为50%的SVG似乎根本不适用于任何浏览器

具有绝对尺寸的SVG仅在Firefox中有效

请注意，第二和第三个元素在Chrome和Opera中完全消失。现在，看看这把小提琴：

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

毫不奇怪，这两种小提琴在IE10中都不起作用。我在IE10中见过SVG的工作原理，所以可能唯一的问题是SVG和HTML的混合？不确定

还要注意的是，两者都不适用于Safari

我的实现错了吗？有没有合适的方法将SVG片段路径与我缺少的HTML元素混合使用？

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

此方法创建相对剪辑路径，并在Safari中使用

请参见以下内容：

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

此方法创建相对剪辑路径，并在Safari中使用

---

请参见以下内容：

将clipPathUnits=objectBoundingBox添加到剪辑路径就是解决方案。但是，如果同一页面中有多个菱形，safari 6.1版似乎只显示第一个，其余的则按预期chrome和firefox显示所有菱形。

将clipPathUnits=objectBoundingBox添加到剪辑路径是解决方案。但是，如果同一页面中有几个方块，safari 6.1版似乎只显示第一个方块，而其他的chrome和firefox则按预期显示所有方块。

我不确定它是否会回答您的问题，但我的替代解决方案不是将百分比分配给剪辑路径，而是使用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”或“%”，只是一个数字，因此我不必考虑大小

---

也许这种方法可以帮助您，您只需使用css和viewbox创建许多大小相同的svg，就可以轻松保持相同的比例。

我不确定它是否会回答您的问题，但我的替代解决方案是使用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”或“%”，只是一个数字，因此我不必考虑大小

---

也许这种方法可以帮助您，您只需使用css和viewbox创建许多大小相同的SVG，就可以轻松保持相同的比例。

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

<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>