Parallax mit SVG-Gruppen

Question

Ich habe eine SVG-Grafik mit Flash für meine persönliche Website erstellt. Das SVG hat mehrere Elemente, in denen der HTML-Code innerhalb des SVG-Tags gruppiert ist. Ich versuche, eine Parallaxe auf jede Gruppe anzuwenden, aber ich scheine nicht zu funktionieren.

Ich habe versucht, jede Schicht als separate SVGs durch Illustrator zu exportieren, aber wenn es im Code angewendet wird, sind die SVGs nicht proportional oder sogar an ihren x, y Koordinaten.

Eine Probe des Codes des vollständigen SVG kann, ist http://codepen.io/Aricha03/pen/YWwaWB

Hier über diesen Link aufgerufen werden der Code ich zur Zeit auf Arbeits

</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> 

Was die 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 ist eine zweidimensionale Grafik. In 1.1/2 Version gibt es keine Z-Achse kann steuern.

Die Schnittstelle dieser Funktion:

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

Hohlraum setTranslate (in float tx, ty in float) erhöht (DOMException);

Scheint du kannst es nicht sogar durch css steuern.

Sie müssen oder svg.js verwenden, um es zu manipulieren. Oder wickle einfach jede Komponente (Wolke, Berge ...) in HTML-Tags und kontrolliere sie mit CSS.