如何设置组中的svg元素的转换原点？

Question

我知道SVG的transform属性存在不少问题，但我的问题是不同的。

我想不出在SVG标签中设置组元素中心点的方法。我在没有任何JavaScript帮助的情况下通过CSS修改SVG元素，所以会出现问题。

我使用单独的文本动画。

<g id="Contained"> 
<g class="top"> 
    <path fill="#E6E7E8" d="M19.2,12.2l-0.7,3.5l-4.9,23c-3.5-3.3-5.7-8-5.7-13.3l0,0C7.8,16,15,8.3,24.1,7.4 
     C21.7,7.8,19.7,9.7,19.2,12.2z"/> 
    <path fill="#E6E7E8" d="M26,43.6c-1.1,0-2.3-0.1-3.3-0.3l2-9.5h0.1l2,9.7c0,0,0,0,0.1,0C26.6,43.6,26.3,43.6,26,43.6z"/> 
    <path fill="#E6E7E8" d="M36.4,40.4l-2.5-10.1l7.5-11.6c0,0,0,0,0,0c-1.6,0.1-2.4,0.2-3.9,0.2c-5.2,0-6.8,0.6-8.1,2.7l-3.1,5.2 
     l1.8-8.6l2.2-10.3c8,1.9,14,9.1,14,17.7C44.2,31.6,41.1,37.1,36.4,40.4z"/> 
</g> 
<g class="text"> 
    <path class="first-letter" fill="#E6E7E8" d="M14.5,47.3c0.4-0.1,0.8-0.1,1.5-0.1c0.7,0,1.1,0.1,1.5,0.1l-3,4.3l1.5,4.6c0,0-0.7,0.1-1.6,0.1 
     c-1,0-1.3-0.1-1.3-0.1l-1-3.7h-0.4l-0.8,3.7c0,0-0.5,0.1-1.4,0.1c-0.9,0-1.4-0.1-1.4-0.1l1.9-8.9c0,0,0.6-0.1,1.4-0.1 
     s1.3,0.1,1.3,0.1l-0.7,3.3h0.3L14.5,47.3z"/> 
    <path class="second-letter" fill="#E6E7E8" d="M26.9,47.2c0,0.2,0,0.6-0.1,1c-0.1,0.4-0.2,0.8-0.4,1h-3.4l-0.3,1.5h2.7c0,0.2,0,0.5-0.1,1 
     c-0.1,0.5-0.2,0.7-0.3,1h-2.7L22,54.4h3.5c0,0.2,0,0.6-0.1,1c-0.1,0.4-0.2,0.8-0.3,1h-6.3l1.9-9.2H26.9z"/> 
    <path class="third-letter" fill="#E6E7E8" d="M30.5,47.3c0,0,0.6-0.1,1.4-0.1c0.8,0,1.4,0.1,1.4,0.1l-1.5,6.9h3.4c0,0.3,0,0.7-0.1,1.1 
     c-0.1,0.4-0.2,0.7-0.4,1.1h-6.2L30.5,47.3z"/> 
    <path class="fourth-letter" fill="#E6E7E8" d="M40,47.3c0,0,0.6-0.1,1.4-0.1c0.8,0,1.4,0.1,1.4,0.1l-1.9,8.9c0,0-0.6,0.1-1.4,0.1 
     c-0.8,0-1.4-0.1-1.4-0.1L40,47.3z"/> 
</g> 

Answer 1

看起来我发现了设置为组元件的中心点在SVG的简单的解决方案。这很简单。

.top {transform-origin: 50% 50%;}