Element grupy środkowej wewnątrz svg

Eksperymentuję, używając rysunku svg jako przejścia strony w powiększeniu. Ta strona HTML ma element SVG, który obejmie cały ekran, w którym znajduje się element <g>, który chciałbym wyśrodkować poziomo i pionowo w środku elementu nadrzędnego svg, a więc w środku okna podglądu.Element grupy środkowej wewnątrz svg

Próbowałem przy użyciu CSS (absolutne pozycjonowanie, translateX(), itp) bezskutecznie. Czy to w ogóle możliwe?

Oto prototype on codepen.

Źródło

2014-07-12 pixeline

To wygląda po prostu potrzebne, aby przetłumaczyć <g> która przechowuje ścieżki, które można obliczyć i zrobić dynamicznie z javascript (przepraszam nie codepen lub jsFiddle)

<head> 
<style> 
@keyframes kaboom { 
    from{ 
    transform: rotate(0deg) scale(0.1); 
    } 
    to{ 
    transform: rotate(3600deg) scale(10); 
    } 
} 
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; 
} 
</style> 
</head> 
<body> 
<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> 
</body>

Źródło

2017-06-14 21:27:28

Element grupy środkowej wewnątrz svg

Odpowiedz

Powiązane problemy