logo标签列表

在SVG中居中组元素

csssvg
11

我正在尝试使用svg图形作为缩放页面过渡。这个html页面有一个SVG元素，它将覆盖整个屏幕，在其中有一个<g>元素，我希望它在其父svg元素中水平和垂直居中，因此在视口的中央。

我已经尝试使用CSS（绝对定位，translateX()等）但没有成功。 这是否可能？

这是codepen上的原型。

1个回答
5

看起来你只需要翻译包含路径的<g>标签，你可以使用JavaScript进行动态计算和操作。

body{
  width:100%;
  height:100%;
  overflow:hidden;
}
.logo{
    position:relative;
      display:block;
    margin:auto;
    border:3px solid black;
    width:600px;
    height:600px;
}
#twitter-g{
    transform: translate(200px,200px);
}
.twitter {

    transform-origin: center center;
    animation: kaboom 5s linear infinite;
}
<svg class="logo">
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" style="border:1px solid grey;">
        <g id="twitter-g" fill="#000000" class="container">
            <path d="M58.9955911,58.7183976 C99.4566331,79.3047392 133.650878,78.1170656 133.650878,78.1170656 C133.650878,78.1170656 120.68763,32.5895762 160.755848,12.3991291 C200.824065,-7.79132132 228.396755,26.2491244 228.396755,26.2491244 C228.396755,26.2491244 235.384824,24.315861 240.59162,22.3825976 C245.798417,20.4493343 253.334569,16.9970781 253.334569,16.9970781 L240.987715,39.2074998 L260,37.1764668 C260,37.1764668 257.656684,40.6294106 250.047652,47.6623904 C242.43862,54.69537 239.302565,58.3286922 239.302565,58.3286922 C239.302565,58.3286922 242.020715,113.130077 213.376072,155.322032 C184.731424,197.513986 147.720866,222.8365 93.957074,228.16601 C40.1932825,233.49552 5.17847695,211.53858 5.17847695,211.53858 C5.17847695,211.53858 28.6920398,210.186177 43.6753907,204.412539 C58.6587425,198.638903 80.2081762,183.430306 80.2081762,183.430306 C80.2081762,183.430306 49.5677752,173.928918 38.5686573,163.239856 C27.569539,152.550794 24.8197595,146.216535 24.8197595,146.216535 L55.0673346,145.820644 C55.0673346,145.820644 23.2484569,128.797323 14.2134669,115.337023 C5.17847604,101.876723 4,88.8123134 4,88.8123134 L27.2546096,98.2762376 C27.2546096,98.2762376 7.92825788,71.7889924 5.17847695,51.2026509 C2.4286974,30.6163093 8.71390781,19.5313562 8.71390781,19.5313562 C8.71390781,19.5313562 18.5345492,38.1320559 58.9955911,58.7183976 Z" id="twitter" class="twitter"></path>
        </g>
    </g>
</svg>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接