Transform-origin для группы SVG в Electron игнорируется - PullRequest
0 голосов
/ 07 июня 2018

У меня есть простая иконка SVG, которую я анимирую в CSS.Вот SVG:

<svg width="100" height="100" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" className={this.state.isTimewatchActive ? "active" : ""}>
  <rect fill="lightgrey" id="background" ry="20" rx="20" height="512" width="512" y="0" x="0" />
  <g id="icon">
    <path
      d="m352.35001,180.85625l-1.2375,-1.16875l12.65,0l5.84375,5.3625l15.46875,-15.675l-28.05,-27.70625l-15.95,15.33125l6.05,6.325l0,12.7875l-3.4375,-3.23125c-21.51875,-19.45625 -48.125,-31.075 -77.6875,-33.61875l0,-26.2625l-22,0l0,26.125l-1.375,0c-30.04375,2.0625 -58.4375,15.46875 -79.75,36.4375l0,-12.2375l6.11875,-6.325l-15.74375,-15.2625l-28.05,27.6375l15.46875,15.675l5.84375,-5.3625l12.2375,0c-0.20625,0 -0.48125,0.48125 -0.6875,0.75625c-22.55,24.13125 -35.0625,55.61875 -35.0625,88.34375c0,71.775 59.19375,130.2125 132.06875,130.2125c72.7375,0 131.93125,-58.36875 131.93125,-130.14375c0,-32.725 -12.375,-64.00625 -34.65,-88zm-91.85,117.90625l-5.5,12.2375l-5.5,-12.2375c-9.625,-2.40625 -16.5,-10.8625 -16.5,-20.96875c0,-9.4875 7.90625,-17.875 16.5,-20.83125l0,-88.9625l11,0l0,88.89375c9.28125,2.54375 16.5,10.93125 16.5,20.9c0,10.10625 -6.875,18.5625 -16.5,20.96875z"
      fill="#FFFFFF"
      stroke="null"
    />
  </g>
</svg>

(я работаю в контексте React, поэтому атрибут className действительно равен class и выражение вычисляется для вывода строки класса.)

Этот SVG имеет два состояния: активное (с class="active" на теге svg) и неактивное (блок кода выше).

Вот (post) CSS для двух состояний:

svg {
    #icon {
        transform: scale(0.8);
        transform-origin: center center;
        transition: all 0.2s;
    }

    #shadow {
        opacity: 0;
        transition: all 0.2s;
    }

    #background {
        transition: all 0.2s;
    }

    &.active {
        #background {
            fill: $greenHn;
        }

        #icon {
            transform: scale(1);
        }

        #shadow {
            opacity: 0.2;
        }
    }
}

Итак, сначала значок должен отображаться в масштабе 0,8 в центре фона.В Electron, он уменьшен, но начало трансформации слева вверху.Странно то, что если я открою инструменты разработчика в Electron и переключу правило transform-origin: center center (с флажком на правой боковой панели) и снова включу его, правило будет применено правильно.Так что это не проблема CSS, но я не знаю, что делать.

У кого-нибудь есть идеи?

Спасибо :))


EDIT
Когда я прочитал, что SVG не должен поддерживать transform-origin, я попытался использовать transform: translate(), но у меня такое же поведение.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...