개체를 SVG 이미지 패턴 채우기 이동하는 방법?

타일 배경 이미지가있는 SVG 객체가 fill="url(#background)인데, #background은 인 pattern으로 정의됩니다. 개체의 x/y 특성 (또는 cx/cy, 또는 어떤 다른 오프셋 정의합니다) 설정에 의해 재배치 그러나개체를 SVG 이미지 패턴 채우기 이동하는 방법?

, 배경이 함께 이동하지 않습니다.

어떻게 배경을 움직이게할까요? How would I move an SVG pattern with an element에서 나는 patternContentUnits='objectBoundingBox'을 설정하려했지만 이미지가 단색의 얼룩으로 변하게됩니다. (기묘하게도 이미지에 따라 색이 변합니다. 마치 첫 번째 픽셀 또는 그와 같은 것입니다.) 여기

이 모두 나타내는 jsfiddle 인 - 상단 rect은 단색으로 전환하고 rect 후 바닥 배경 화상을 보유하고 있지만,이 rect으로 이동하지 않는다되었습니다

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

x/y 속성을 설정하는 대신 transform="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>에 입력 할 수없는 경우 rect 문자를 <g> 요소의 자식으로 만들고 <g> 요소를 대신 변환 할 수 있습니다.

출처

2013-01-18 21:03:24

. 그것은 작동하지 않습니다 - 배경은 여전히 rect로 이동하지 않습니다. – Yang

patternUnits의 값을 "objectBoundingBox"로 설정하십시오.

출처

2013-01-19 08:03:17 defghi1977

나는 방금 jsfiddle에서 이것을 시도했다. 그것은 작동하지 않는다 - 나는 아무 다름도 본다. – Yang

실제로 동일한 문제가 발생하여 해결책을 찾았습니다. 나는 변화를 보여주기 위해 당신의 바이올린을 갈랐다. 기본적으로 여기서는 도움이되지 않으므로 patternContentUnits 속성을 제거하고 각 업데이트 후에 rect 객체의 x 속성과 일치하도록 이미지의 x 속성을 업데이트합니다.

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 : 난 그냥 jsfiddle에이 밖으로 시도

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 이미지 패턴 채우기 이동하는 방법?

답변

관련 문제