Как масштабировать отдельные элементы SVG с помощью jQuery/Javascript?

Question

У меня есть SVG со случайно распределенными квадратами на странице, которые масштабируются, когда пользователь прокручивает простую точку. Проблема, с которой я сталкиваюсь, заключается в том, что после шкалы квадратов она создает горизонтальную полосу прокрутки, как если бы весь блок SVG масштабировался, а не отдельные элементы.

Можно ли настроить таргетинг на каждого отдельного пользователя rect с уменьшением движения, а не с изменением размера (чтобы создать впечатление, что оно растет), так что оно также не растягивает страницу, а затем пользователь продолжает прокручивать, он возвращается к исходному размеру?

Вот мои: 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.