css - SVG 组的视差

Question

我使用 flash 为我的个人网站创建了一个 svg 图形。 SVG 有多个元素，其中提供的 html 代码在 SVG 标签内分组。我正在尝试对每个组应用视差，但似乎无法正常工作。

我尝试通过 Illustrator 将每个图层导出为单独的 SVG，但是，在代码中应用它时，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轴可以控制。

该函数的接口(interface):

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

void setTranslate(in float tx, in float ty) raises(DOMException);

看来你连css都控制不了。

您需要使用d3.js 或svg.js 来操作它。或者只是将每个组件(云，山脉......)包装在 html 标签中并通过 css 控制它。