javascript - 使用 rellax.js 翻转某些 svg 元素?
问题描述
当我将类应用于 g 元素时,使用 rellax.js 会翻转某些 svg 元素?我不明白为什么有些工作正常而有些则不行。
这是一个不起作用的:
<g
id="mountain-4"
class="rellax"
style="display: inline"
transform="matrix(1.3333333,0,0,-1.3333333,0,666.66667)"
>
<title id="title9515">mountain-4</title>
<g id="g182""
<g id="g188">
<g id="g190">
<path
d="m 562.5,360 c 0,0 -9,-15 -14.5,-17.5 v 0 C 542.5,340 531,323 531,323 v 0 l -29,-35 -10.5,1.5 c 0,0 -10.5,1.5 -16.5,0 v 0 C 469,288 468,272 468,272 v 0 c 0,0 -9,-9 -13,-22 v 0 c -4,-13 -20.036,-40.333 -20.036,-40.333 v 0 h -8.346 L 409.824,204 396.007,185 344.932,168 277,154 c 0,0 -93,1 -114.9,8 v 0 C 140.199,169 66,234 66,234 v 0 c 0,0 -21,3 -39,0 v 0 C 20.296,232.883 10.126,222.613 0,210.16 v 0 V 0 H 750 V 200.159 L 723,229 c 0,0 -14,11 -22,17.5 v 0 c -8,6.5 -25,43 -25,43 v 0 c 0,0 -12.5,12 -24,18 v 0 c -11.5,6 -27,37.5 -27,37.5 v 0 l -39,15 z"
style="fill: url(#linearGradient200); stroke: none"
id="path202"
/>
</g>
</g>
</g>
</g>
而这个行为正常:
<g id="mountain-3"
class="rellax" style="display: inline">
<title id="title9513">mountain-3</title>
<g
id="g118"
style="display: inline"
transform="matrix(1.3333333,0,0,-1.3333333,0,666.66667)"
>
<g id="g120">
<g id="g126">
<g id="g128">
<path
d="M 709.333,294.917 670,283 l -74,-52.667 -106,-16 -66.938,6 -30.835,7.334 L 375,224.333 311.932,241.667 290,253 260,252.334 246,241.667 226.667,241 158,222.333 73.334,209.667 0,195.194 v -90.361 h 750 v 187.153 l -25.333,7.681 z"
style="fill: url(#linearGradient136); stroke: none"
id="path138"
/>
</g>
</g>
</g>
</g>
<g>
解决方案
推荐阅读
- python - 函数值检索:如何访问函数外部变量的值。以及如何在另一个函数中使用该值?
- gradle - gradlew complie 没有 lib.jar
- angular - 如何在Angular 6中为switch case编写单元测试用例?
- php - 如何在 laravel 的控制器中调用控制台->命令->句柄函数
- android - 当我没有采取必要的依赖项时,为什么要导入 Androidx?
- matlab - 当我输入超过 6 个值时程序不起作用
- react-native - 如何在 react-native 中刷新平面列表中的特定行?
- python - 为什么 Keras 损失只考虑输入数组的最后一维?
- java - 有没有一种方法可以在 okhttp3 拦截器中等待刷新的令牌?
- linked-list - 遍历列表时,借用的 RefCell 持续时间不够长