Question

我有一个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>

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

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

自定义由SVG <clippath>剪切的HTML元素的可见区域

1 个答案: