Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/377.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181

Warning: file_get_contents(/data/phpspider/zhask/data//catemap/7/css/37.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 从左下角开始的skrollr变换_Javascript_Css_Svg - Fatal编程技术网

Javascript 从左下角开始的skrollr变换

Javascript 从左下角开始的skrollr变换,javascript,css,svg,Javascript,Css,Svg,我正在使用skrollr为一些svg元素的比例设置动画。问题是我想设置它们从左下角展开的动画,但它们是从左上角(默认艺术板定位点)设置动画的 。。。 ... 你可以在上面看到。有没有一个标签可以添加到svg中以改变它的定位点,我可以在skrollr中做些什么,或者从illustrator中导出它来实现这一点 谢谢我不确定skrollr是否用于SVG元素,它可以在webkit上使用,但我不确定它是否可以在其他浏览器上使用(只是提醒一下) 您需要指定转换原点,-webkit转换原点:左下角 &

我正在使用skrollr为一些svg元素的比例设置动画。问题是我想设置它们从左下角展开的动画,但它们是从左上角(默认艺术板定位点)设置动画的

。。。
...

你可以在上面看到。有没有一个标签可以添加到svg中以改变它的定位点,我可以在skrollr中做些什么,或者从illustrator中导出它来实现这一点


谢谢

我不确定skrollr是否用于SVG元素,它可以在webkit上使用,但我不确定它是否可以在其他浏览器上使用(只是提醒一下)


您需要指定转换原点,
-webkit转换原点:左下角

<g data-0="transform:scale(0)" data-600="transform:scale(1)" class="bottom-left skrollable skrollable-between" style="-webkit-transform: scale(0.19333333333333333); -webkit-transform-origin: bottom left;">

skrollr确实支持SVG。但是SVG没有
转换
样式(请参阅)。它只有一个变换属性,skrollr不会设置该属性的动画(请参见)。
<g data-0="transform:scale(0)" data-600="transform:scale(1)" class="bottom-left skrollable skrollable-between" style="-webkit-transform: scale(0.19333333333333333); -webkit-transform-origin: bottom left;">