2014-02-06 42 views
0

我有一個圖像的角落被切斷。圖片必須具有響應性,以便可以隨頁面一起增長和縮小。該圖像由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> 

模式但是,這並不工作,因爲我必須給一個絕對的寬度和高度。我也嘗試使用剪輯路徑,但似乎從來沒有工作正確。

有沒有人有任何想法或見解,可能會幫助我在這裏?

下面是圖片需要的樣例。 enter image description here

+0

可以共享頁面或特定區域的截圖,你需要嗎? – Era

回答

1

爲何會停止響應?只要viewBox設置正確(就像你已經完成的那樣),你可以調整容器的大小(例如,<div>),它將保持SVG的大小,並且將使用div來調整大小。

例如,嘗試下面撥弄調整「結果」框:

http://jsfiddle.net/bCJs9/

+0

這是我使用真實圖像時發生的情況。 http://jsfiddle.net/KYv6e/ –

+0

無論你做什麼,你將不得不定製適合每個圖像的尺寸的SVG。 SVG無法自動適應任何尺寸的圖像。您必須明確設置文件中圖形元素的大小。但是,您可以使用Javascript自動生成合適的SVG。 –

+0

三角形是否必須是透明的?如果只需要與背景顏色相同,那麼就有更簡單的解決方案。 –