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轴可以控制。

此功能的界面：

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

void setTranslate（在float tx中，在float ty中）引发（DOMException）;

似乎你甚至无法用css控制它。

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

SVG群组的视差

1 个答案: