首页 > 解决方案 > 使用 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>

标签: javascript

解决方案


推荐阅读