如何使用jQuery/Javascript缩放单个SVG元素？

我有一个随机分散的正方形在页面上的SVG，当用户滚动经过某个点时可以放大。我遇到的问题是，一旦正方形缩放，就会创建一个水平滚动条，就好像整个SVG块缩放一样，而不是单个元素。如何使用jQuery/Javascript缩放单个SVG元素？

是否有可能针对每个个体rect通过缓动动作进行缩放而不是直截了当地改变大小（以给出它正在增长的印象），以便它也不会伸出页面，然后一旦用户继续滚动，它恢复到原始大小？

HTML：

<div class="move-wrapper"> 

<svg class="enlarge" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
    viewBox="82 -117 1363 770" style="enable-background:new 82 -117 1363 770;" xml:space="preserve"> 
<style type="text/css"> 
    .st0{fill:none;stroke:#A7A9AC;stroke-width:5;stroke-miterlimit:10;} 
</style> 
<rect x="153" y="-34" class="st0" width="22.1" height="22.1"/> 
<rect x="335.5" y="55.5" class="st0" width="22.1" height="22.1"/> 
<rect x="529.5" y="343.1" class="st0" width="22.1" height="22.1"/> 
<rect x="153.6" y="464.4" class="st0" width="22.1" height="22.1"/> 
<rect x="976.5" y="166.4" class="st0" width="22.1" height="22.1"/> 
<rect x="1288.3" y="-12.1" class="st0" width="22.1" height="22.1"/> 
<rect x="941.9" y="575.3" class="st0" width="22.1" height="22.1"/> 
<rect x="1355.9" y="434.9" class="st0" width="22.1" height="22.1"/> 
</svg> 

</div> 

<div class="spacer"></div> 
<div class="spacer"></div>

CSS：

.move-wrapper { 
    width:100%; 
    position:absolute; 
} 

.spacer { 
    height:500px; 
}

JS：

$(function() { 

    $(window).on('scroll', function() { 
    scrollPosition = $(this).scrollTop(); 
    if (scrollPosition >= 20) { 
     $(".enlarge").css({"-moz-transform": "scale(1.5,1.5)", "webkit-transform": "scale(1.5,1.5)"}); 
    $(this).off('scroll'); 
    } 

    if (scrollPosition >= 40) { 
     $(".enlarge").css({"-moz-transform": "scale(1,1)", "webkit-transform": "scale(1,1)"}); 
     $(this).off('scroll'); 
    } 
    }); 

});

来源

2015-12-09 user3663071

您是否尝试将.enlarge类应用于每个“rect”而不是整个SVG元素？ – jered

我已经尝试过了，但它只是将我的方块变成纯黑色方块并消除中风。 – user3663071

这里是一个可能的解决方案：http://jsfiddle.net/_jered/0yy0nLam/

尽可能将样式移动到CSS中。
将每个rect包装在svg中以控制与比例无关的定位。
将每个rect偏移一半宽度，以便变换居中。

有一点需要提防的是，我不知道，如果x和y属性是规格为svg元素的一部分。似乎在Chrome中工作，但在浏览器中可能不一致。我懒得实施的更坚实的方法是改为进行CSS转换。

来源

2015-12-10 00:09:23 jered

如何使用jQuery/Javascript缩放单个SVG元素？

回答

相关问题