У меня есть простая иконка 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()
, но у меня такое же поведение.