Как масштабировать SVG на свитке?

Question

У меня есть SVG, который представляет собой ряд ящиков, которые я хочу масштабировать на 150% при прокрутке окна, а затем обратно в исходный размер.

Я довольно новичок в JavaScript, поэтому не знаю, почему он не работает.

Вот мой JSFiddle

Ниже мой код:

HTML:

<div class="container"> 
<svg class="scale" 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="0 0 219.7 104.3" style="enable-background:new 0 0 219.7 104.3;" xml:space="preserve"> 
<style type="text/css"> 
.st0{fill:none;stroke:#000000;stroke-width:5;stroke-miterlimit:10;} 
</style> 
<rect x="18.9" y="15.3" class="st0" width="22.2" height="22.2"/> 
<rect x="71.5" y="15.3" class="st0" width="22.2" height="22.2"/> 
<rect x="125.3" y="15.3" class="st0" width="22.2" height="22.2"/> 
<rect x="177.8" y="15.3" class="st0" width="22.2" height="22.2"/> 
<rect x="18.9" y="60.8" class="st0" width="22.2" height="22.2"/> 
<rect x="71.5" y="60.8" class="st0" width="22.2" height="22.2"/> 
<rect x="125.3" y="60.8" class="st0" width="22.2" height="22.2"/> 
<rect x="177.8" y="60.8" class="st0" width="22.2" height="22.2"/> 
</svg> 
</div> 

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

CSS:

.container { 
    width:800px; 
} 
.spacer { 
    height:500px; 
} 

JS:

$(window).scroll(function() { 
    $(".scale").css({"-moz-transform": scale(150), "webkit-transform": scale(150)}); 
    }); 

Спасибо, я очень ценю помощь!

Answer 1

Несколько вопросов:

• вам нужно вложить значения из ваших CSS атрибутов в кавычках (иначе Javascript пытается интерпретировать его как вызов функции, и не получится)

• шкала представляет собой отношение , так что 150% должно быть написано 1,5, а не 150

Итак:

$(window).scroll(function() { 
    $(".scale").css({"-moz-transform": "scale(1.5)", 
        "webkit-transform": "scale(1.5)"}); 
    }); 

вероятно Вы также хотите включить стандарт «преобразование»

Answer 2

Я не уверен, но возможно вы забыли инициализировать JQuery в вашей скрипке. Кроме того, я завернул свойство scale в кавычки и использовал 1.5 вместо 150, и, похоже, он работает на первый взгляд.

Всякий раз, когда вы передаете CSS в качестве объекта (в фигурных скобках), как вы это делали, такие свойства, как background-color, становятся backgroundColor, потому что вам нужно использовать camelCase, например javascript.

Здесь нет ни одного комментария Fiddle.

$(window).scroll(function() { 
    $(".scale").css({"-moz-transform": "scale(1.5,1.5)", "webkit-transform": "scale(1.5,1.5)"}); 
    });