無法更改三個容器中的SVG矩形屬性

經過多次嘗試和代碼更改後，我無法在SVG內製作矩形以更改其位置 - 甚至不要求動畫。明顯使用jQuery SVG plugin加動畫擴展。無法更改三個容器中的SVG矩形屬性

問題：一個SVG包裝在三個<div>內部，y在文檔加載後有一個矩形，需要在y:0。這是代碼：

var rect = jQuery('div.post-image').children('svg').svg().svg('get'); 

jQuery(rect).each(function(){ 
    jQuery(this).change('.b1', {y:0}); 
});

那麼，矩形沒有任何反應，它保持原來的座標。 Chrome控制檯也不會說任何事情。

補充：問題

<a href="#" class="post-image" title="title"> 
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="250" height="140" viewBox="0,0,250,140" overflow="hidden"> 
    <switch> 
    <g> 
     <defs> 
      <filter id="innershadow"> 
       <feOffset dx="0" dy="0"></feOffset> 
       <feGaussianBlur stdDeviation="7" result="offset-blur"></feGaussianBlur> 
       <feComposite operator="out" in="SourceGraphic" in2="offset-blur" result="inverse"></feComposite> 
       <feFlood flood-color="#000" flood-opacity="0.3" result="color"></feFlood> 
       <feComposite operator="in" in="color" in2="inverse" result="shadow"></feComposite> 
       <feComposite operator="over" in="shadow" in2="SourceGraphic"></feComposite> 
      </filter> 
      <pattern xmlns="http://www.w3.org/2000/svg" id="image-771" patternUnits="userSpaceOnUse" width="250" height="202"> 
       <image href="example-310x250.jpg" xlink="http://www.w3.org/1999/xlink" x="0" y="0" width="250" height="202"></image> 
      </pattern> 
      <clipPath id="clip"> 
       <polygon points="0,0 235,0 250,70 235,140 0,140 15,70"></polygon> 
      </clipPath> 
     </defs> 
     <polygon points="0,0 235,0 250,70 235,140 0,140 15,70" style="fill: url(#image-771); filter:url(#innershadow);"></polygon> 
     <rect class="b1" width="100%" height="100%" style="fill:rgb(0,92,148); opacity: 0.9;" clip-path="url(#clip)" x="0" y="98"></rect> 
     <rect class="b2" width="60" height="25" style="fill:rgb(0,92,148); opacity: 0.9;" clip-path="url(#clip)" x="190" y="0"></rect> 
     <rect class="b3" width="100" height="25" style="fill:rgb(0,0,0); opacity: 0.75;" clip-path="url(#clip)" x="0" y="0"></rect> 
    </g> 
    <foreignObject width="250" height="140"> 
     <img width="250" height="125" src="example-fallback.jpg" alt="example" title="title">  </foreignObject> 
    </switch> 
    </svg> 
</a>

的HTML，我願意用<canvas>這一點，但我不知道是什麼結果。

來源

2012-06-20 DarkGhostHunter

發現了什麼憎惡埃及人，問題：

var rect = jQuery('a.post-image').children('svg').find('.b2, .b3'); 

jQuery(rect).each(function(){ 
    jQuery(this).attr('y','-25'); 
});

完成，無需使用任何插件。 Okey，不是最好的方式（找到而不是最直接的選擇器），但它會削減它。

來源

2012-06-20 01:54:25 DarkGhostHunter

無法更改三個容器中的SVG矩形屬性

回答

相關問題