Question

我有一个简单的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）和非活动（上面的代码块）。

这是两个州的（后）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问题，但后来我不知道该怎么做。

有没有人有任何想法？

谢谢：）

修改
当我读到SVG不支持transform-origin时，我尝试使用transform: translate()，但我有相同的行为。

电子中SVG组的变换原点被忽略

0 个答案: