我正在尝试使用svg图作为放大页面过渡.这个html页面有一个SVG元素,它将覆盖整个屏幕,其中是一个< g>元素,我希望在其父svg元素的中间水平和垂直居中,因此在视口的中间.
我尝试过使用CSS(绝对定位,translateX()等)无济于事.
它可能吗？
这是一个prototype on codepen.
解决方法
看起来你只需要翻译< 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>
