2014-09-01 45 views
0

我試圖得到一個平鋪的圖像顯示在一個過濾器和瓷磚正確與其他任何應用程序,無論其他項目繪製在哪裏,AKA平鋪圖像應該以某種方式全局修復。如何排列這些通過SVG過濾器應用的瓷磚?

SVG複製的問題(我知道你可能會使用一個圖案填充正常做到這一點它只是複製我所遇到的問題):

<svg width="700" height="700"> 
    <defs> 
    <filter width="1" height="1" id="stripe"> 
     <feImage xlink:href="http://i.imgur.com/T5fsm0U.png" height="160" width="80" result="patternimage"></feImage> 
     <feTile in="patternimage"></feTile> 
    </filter> 
    </defs> 
    <rect x="0" y="0" width="300" height="400" filter="url(#stripe)"></rect> 
    <rect x="160" y="10" width="300" height="400" filter="url(#stripe)"></rect> 
    <rect x="200" y="0" width="200" height="200" filter="url(#stripe)"></rect> 
</svg> 

codepen: http://codepen.io/anon/pen/iEkmL

我只要它的輸出可用作過濾步驟,不用關心是否使用了模式而不是feTile。我覺得答案與filterUnits或primitiveUnits有關,但我不太瞭解如何使用它們來解決問題。

+0

目前還不清楚你在問什麼。你是否試圖做到這一點,無論你在哪裏繪製矩形,模式總是排成一列?換句話說,一個「全球性」固定位置模式? – 2014-09-01 07:39:41

+0

對,對不起。無論矩形在哪裏繪製,模式都應該排列。感謝您的幫助澄清。 – Shadaez 2014-09-01 07:41:13

回答

1

我不確定你可以用過濾器做到這一點。相對於它們所應用的元素而言,篩選器或多或少都是如此。如果您嘗試在「全局」(用戶)空間中繪製圖像,它可能在原始濾鏡子區域中不可見,並且不會平鋪。

雖然你可以用模式做到這一點。你只需要使用patternUnits="userSpaceOnUse"

http://codepen.io/anon/pen/Brcox

然後,您可以使用圖案填充作爲輸入的過濾器,如果這是你需要做的事。