Question

我知道SVG的转换属性中存在很多问题，但我的问题不同。

我无法想出一种在SVG标签中设置组元素中心点的方法。我在没有任何JavaScript帮助的情况下通过CSS修改SVG元素，因此存在问题。

我分别以.text为动画.top。

<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%;}

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

1 个答案: