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

Question

我有一个 SVG，页面上有随机分布的方 block ，当用户滚动到某个点时，这些方 block 会放大。我遇到的问题是，一旦方 block 缩放，它就会创建一个水平滚动条，就像整个 SVG block 缩放一样，而不是单个元素。

是否有可能将每个单独的 rect 定位为通过缓和 Action 在适当的位置缩放，而不是直截了本地改变大小(给人一种它正在增长的印象)，这样它也不会拉伸(stretch)页面，然后一旦用户继续滚动，它就会恢复到原来的大小？

这是我的:Updated JSFiddle

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 转换。