Параллакс с группами SVG

Question

Я создал графику svg, используя flash для своего личного сайта. SVG имеет несколько элементов, в которых предоставленный html-код сгруппирован в тег SVG. Я пытаюсь применить параллакс к каждой группе, но не могу заставить его работать.

Я попытался экспортировать каждый слой в виде отдельных SVG через Illustrator, однако, применяя его в коде, SVG не пропорциональны или даже имеют координаты x, y.

Образец кода полного SVG можно получить по этой ссылке http://codepen.io/Aricha03/pen/YWwaWB

Вот код, я в настоящее время работает над

</svg> 
     </div> 
    </div> 
    <div id="content"> 
     <h1>THIS IS A SAMPLE HEADER</h1> 
     <p>LOREM IPSUM TIME!</p> 
     <p>sldafksdlfasdfjasldkfajsldkfajsdlfsssss</p> 
     <div style="background-color: green; height: 1000px; width: 100px"></div> 
    </div> 

Что касается CSS

.parallax { 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
     width: 100%; 
     height: 100%; 
    } 
    .parallax_1 { 
    -webkit-transform: translateZ(0); 
    transform: translateZ(0); 
    } 
    .parallax_2 { 
    -webkit-transform: translateZ(-1px); 
    transform: translateZ(-1px); 
    } 
    .parallax_3 { 
    -webkit-transform: translateZ(-2px); 
    transform: translateZ(-2px); 
    } 
.parallax_4 { 
    -webkit-transform: translateZ(-3px); 
    transform: translateZ(-3px); 
    } 
.parallax_5 { 
    -webkit-transform: translateZ(-4px); 
    transform: translateZ(-4px); 
    } 
.parallax_6{ 
    -webkit-transform: translateZ(-5px); 
    transform: translateZ(-5px); 
    } 
.parallax_7{ 
    -webkit-transform: translateZ(-6px); 
    transform: translateZ(-6px); 
    } 

Answer 1

SVG является двухмерная графика. В версии 1.1/2 управление осью z отсутствует.

Интерфейс этой функции:

https://www.w3.org/TR/SVG/coords.html#InterfaceSVGTransform

недействительными setTranslate (в флоат-TX, в флоат-ти) поднимает (DOMException);

Кажется, вы даже не можете управлять им css.

Для управления им необходимо использовать d3.js или svg.js. Или просто оберните все компоненты (облако, горы ...) в теги html и управляйте им css.