如何使SVG圖像圖案填充物體移動？

我有一些SVG對象，使用fill="url(#background)，其中我將#background定義爲pattern，其中只包含image。如何使SVG圖像圖案填充物體移動？

然而，當目的是通過設置其x/y屬性（或cx/cy，或任何其他定義的偏移量）重新定位時，背景不隨它移動。

如何讓背景移動？從How would I move an SVG pattern with an element我試圖設置patternContentUnits='objectBoundingBox'，但它只是將圖像變成純色blob（奇怪的是，根據圖像着色，就好像它只是第一個像素或某些類似）。

下面是說明這一切的一個的jsfiddle - 頂rect已經變成了堅實的顏色，然後底部rect有背景圖像，但它不與rect移動：

http://jsfiddle.net/x8nkz/17/

我知道，如果您使用的是transform="translate(...)"而不是設置x/y屬性，則背景確實也會也會被翻譯，但我正在使用的現有代碼庫並未使用translate來進行定位（並且會有其他聯合國對其他申請的預期後果）。

在此先感謝您的幫助。

來源

2013-01-18 Yang

如果使用objectBoundingBox單位，那麼1（或100％）的寬度就是對象的寬度，所以178應該是178的倍數。你可能想要

<pattern id="pat1" width="179" height="132" patternUnits="userSpaceOnUse" patternContentUnits="objectBoundingBox"> 
    <image width="1" height="1" xlink:href="http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/honey_im_subtle.png"></image> 
</pattern>

這不會使模式移動。你將需要進行某種改變才能做到這一點。如果你不能將它放在<rect>上，也許你可以將矩形設置爲<g>元素的子元素，並改爲改變<g>元素。

來源

2013-01-18 21:03:24

我只是想這一點上的jsfiddle。它不起作用 - 背景仍然不會隨着矩形移位。 – Yang

嘗試將patternUnits的值設置爲「objectBoundingBox」。

來源

2013-01-19 08:03:17 defghi1977

我剛剛在jsfiddle上試了一下。它不起作用 - 我沒有看到任何區別。 – Yang

我實際上遇到了同樣的問題，並找到了解決辦法。我已經撥動你的小提琴來展示變化。基本上，您刪除了patternContentUnits屬性，因爲它在這裏沒有幫助，並在每次更新後更新圖像的x屬性以匹配rect對象的屬性。

http://jsfiddle.net/RteBM/2/

更新HTML：

<svg xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" width="100%" height="100%"> 
<title>basic pattern</title> 
<defs> 
    <pattern id="pat1" width="179" height="132" patternUnits="userSpaceOnUse"> 
     <image x="0" y="0" width="179" height="132" xlink:href="http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/honey_im_subtle.png"></image> 
    </pattern> 
    <pattern id="pat2" width="179" height="132" patternUnits="userSpaceOnUse"> 
     <image x="0" y="0" width="179" height="132" xlink:href="http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/honey_im_subtle.png"></image> 
    </pattern> 
</defs> 
<rect id="rect1" x="0" y="0" width="179" height="132" fill="url(#pat1)"/> 
<rect id="rect2" x="0" y="150" width="179" height="132" fill="url(#pat2)"/> 
</svg>

更新JS：

var i = 0; 
var newX; 
setInterval(
    function(){ 
     $('rect').attr('x', Math.sin(i+=.01)*100+100);  
     $('#pat1').attr('x', $("#rect1").attr('x')); 
    }, 100);

來源

2013-10-30 06:11:38 SwarmIntelligence

如何使SVG圖像圖案填充物體移動？

回答

相關問題