elemento centrale del gruppo all'interno di svg

Sto sperimentando utilizzando una figura svg come una transizione della pagina di ingrandimento. Questa pagina html ha un elemento SVG che coprirà l'intero schermo, in cui è presente un elemento <g> che vorrei essere centrato orizzontalmente e verticalmente nel mezzo dell'elemento principale svg e così nel mezzo della vista.elemento centrale del gruppo all'interno di svg

Ho provato a utilizzare inutilmente i CSS (posizionamento assoluto, translateX(), ecc.). È possibile?

Questo è un prototype on codepen.

fonte

2014-07-12 pixeline

Sembra che tu solo bisogno di tradurre il <g> che contiene il percorso, che si poteva calcolare e fare in modo dinamico con javascript (mi spiace non codepen o 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>

fonte

2017-06-14 21:27:28

elemento centrale del gruppo all'interno di svg

risposta

Problemi correlati