Question

我有一个SVG，页面上随机分散的正方形，当用户滚动到某一点时会向上扩展。我遇到的问题是，一旦正方形缩放，它就会创建一个水平滚动条，就好像整个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');
    }
  });

});

Answer 1

以下是一种可能的解决方案：http://jsfiddle.net/_jered/0yy0nLam/

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

要注意的一件事是，我不确定x和y属性是否属于svg元素的规范。似乎在Chrome中可以使用，但在浏览器中可能不一致。我实在懒得实现的更坚实的方法是改为进行CSS转换。

如何使用jQuery / Javascript扩展单个SVG元素？

1 个答案: