SVG 组的视差
Parallax with SVG groups
我使用 flash 为我的个人网站创建了一个 svg 图形。 SVG 有多个元素,其中提供的 html 代码分组在 SVG 标签内。我正在尝试对每个组应用视差,但似乎无法正常工作。
我尝试通过 Illustrator 将每个图层导出为单独的 SVG,但是,在代码中应用它时,SVG 不成比例,甚至在它们的 x、y 坐标上也不成比例。
可以通过此访问完整 SVG 的代码示例 link
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);
}
SVG
是二维图形。
1.1/2版本没有z轴可以控制。
该函数的接口:
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.
控制它
我使用 flash 为我的个人网站创建了一个 svg 图形。 SVG 有多个元素,其中提供的 html 代码分组在 SVG 标签内。我正在尝试对每个组应用视差,但似乎无法正常工作。
我尝试通过 Illustrator 将每个图层导出为单独的 SVG,但是,在代码中应用它时,SVG 不成比例,甚至在它们的 x、y 坐标上也不成比例。
可以通过此访问完整 SVG 的代码示例 link 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);
}
SVG
是二维图形。
1.1/2版本没有z轴可以控制。
该函数的接口:
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.