剪掉响应图像的角落

Question

我有一个切角的图像。图像必须具有响应性，因此它可以随页面增长和缩小。图像由CMS管理，因此必须以编程方式切割角落。在上传之前，客户端不会手动执行此操作。

我可以使用SVG勾勒出我需要显示的图像部分。不幸的是，我必须给出一个固定路径，以便它不再响应。我甚至尝试创建一个使用图像作为路径填充的模式

<svg version="1.1" viewBox="0 0 242 282" preserveAspectRatio="xMinYMin meet" class="svg-content">
    <defs>
        <pattern id="img1" patternUnits="userSpaceOnUse" width="242" height="282" x="0" y="0">
            <image xlink:href="http://placehold.it/242x282" x="0" y="0" width="242" height="282" />
        </pattern>
    </defs>
    <path d="M 0 0 L 178 0 L 242 64 L 242 282 L 0 282 z" stroke="green" fill="url(#img1)"/>
</svg>

但这不起作用，因为我必须给出绝对的宽度和高度。我也试过使用剪辑路径，但似乎从来没有正常工作。

有没有人有任何想法或见解可以帮助我在这里？

以下是图片需要的示例。

Answer 1

为什么它不再响应？只要viewBox设置正确（正如您所做的那样），您就可以调整持有SVG的容器（例如<div>）的大小，并使用div调整大小。

例如，尝试调整以下小提琴中的“结果”框：

http://jsfiddle.net/bCJs9/