自定义 SVG <clipPath> 裁剪的 HTML 元素的可见区域答案

【问题标题】：Customize visible area of HTML element clipped by SVG <clipPath>自定义 SVG <clipPath> 裁剪的 HTML 元素的可见区域
【发布时间】：2016-01-30 21:46:23
【问题描述】：

我有一个 HTML 元素，我使用外部 SVG 中的路径对其进行剪辑，这使得设置如下：

CSS：

video {
  clip-path: url(path.svg#clip)
}

HTML：

<html>
<body>
    <video src="foo.png" width="480" height="150" />
</body>
</html>

SVG：

<svg width="480px" height="92px" viewBox="0 0 480 92">
    <defs>
        <clipPath id="clip">
            <path d="…"></path>
            <path d="…"></path>
            <path d="…"></path>
        </clipPath>
</svg>

请注意，我要剪辑的图像略高于剪辑它的路径。如何定位图像的位置以更改可见区域？

【问题讨论】：

您没有一直使用 svg 有什么原因吗？它将阻止使用 CSS clip-path，有更好的浏览器支持并使图像定位更容易。
是的，原因是我正在剪辑视频。我将更新代码以澄清这一点。
使用 html5 可以嵌套 html > svg > html。所以直接使用 svg 也应该可以。

标签： html css svg

【解决方案1】：

我通过将<video> 包装在另一个容器中并对其应用遮罩解决了这个问题。容器是相对定位的，使用绝对定位我可以在里面移动视频。

CSS：

.container {
  position: relative;
  width: 480px;
  height: 150px;
  overflow: hidden;
  clip-path: url(path.svg#clip)
}

.container video {
  position: absolute;
  /* … */
}

HTML：

<html>
<body>
    <div class="container">
        <video src="foo.png" width="480" height="150" />
    </div>
</body>
</html>

【讨论】：

另一个选项是mask-clip 或类似的东西，如this MDN page 所述。