關閉響應圖像的角落

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設置正確（就像你已經完成的那樣），你可以調整容器的大小（例如，<div>），它將保持SVG的大小，並且將使用div來調整大小。

例如，嘗試下面撥弄調整「結果」框：

http://jsfiddle.net/bCJs9/