SVG路径旋转中心

时间:2014-09-21 02:22:32

标签: css svg

请帮帮我。 我有一个SVG图像。我需要从这个SVG动画很多对象。 但提供动画对象移动的轴线不清楚。我需要对象绕其轴旋转。

视频屏幕:http://dropix.net/view/1411265678541e348e45f2d/

CSS

@-webkit-keyframes svg_atom_1 {
  0% {
  }
  100% {
    -webkit-transform: rotate(359deg); 
    -moz-transform: rotate(359deg); 
    -o-transform: rotate(359deg);
    -ms-transform: rotate(359deg);
  }
}
.element-atom-1 {
    -webkit-animation: svg_atom_1 13s linear infinite;
    animation: svg_atom_1 3s linear infinite;
    z-index: 999;
    position: absolute;
}

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="960" height="320" viewBox="0 0 960 320">
<path class="element-clock" fill="#ED1E79" d="M485 90h2v7h-2zM525.07 99.488l1.369.889-4.444 6.845-1.369-.889zM552.711 128.25l.853 1.392-6.958 4.263-.853-1.392zM554.365 205.887l-.819 1.41-7.056-4.1.819-1.41zM526.35 235.354l-1.396.845-4.224-6.982 1.396-.845zM486.872 245.342l-1.631.033-.166-8.159 1.631-.033zM448.369 236.372l-1.494-.658 3.29-7.468 1.494.658zM418.988 206.991l-.69-1.479 7.394-3.452.69 1.479zM408.441 168.492l.048-1.631 8.157.239-.048 1.631zM418.398 129.659l.852-1.39 6.957 4.265-.852 1.39zM446.366 101.147l1.375-.877 4.388 6.881-1.375.877zM564.358 167.014l-.017 1.633-8.16-.087.017-1.633z"/>
<path fill="#FF7BAC" d="M485.867 86.432"/>
<path opacity=".6" fill="#FBB03B" d="M486 86v87l39.443 64.233s42.257-20.391 41.319-69.906c.001 0-.093-73.445-80.762-81.327z"/><circle fill="#0cc" stroke="#0cc" stroke-width="1.558" stroke-miterlimit="10" cx="485.674" cy="167.864" r="50.004"/><g fill="#666766">
<path class="element-clock-2" d="M556.291 183.288l.363-1.702 5.116 1.092-.363 1.702zM554.28 190.604l.537-1.656 4.976 1.614-.537 1.656zM551.463 197.599l.707-1.59 4.78 2.126-.707 1.59zM543.784 210.531l1.025-1.407 4.228 3.081-1.025 1.407zM538.99 216.323l1.168-1.295 3.883 3.502-1.168 1.295zM533.599 221.605l1.293-1.163 3.498 3.889-1.293 1.163zM527.665 226.295l1.41-1.023 3.069 4.233-1.41 1.023zM514.518 233.676l1.59-.711 2.134 4.772-1.59.711zM507.458 236.304l1.655-.538 1.617 4.973-1.655.538zM500.109 238.136l1.705-.363 1.09 5.115-1.705.363zM492.673 239.234l1.732-.181.543 5.203-1.732.181zM477.605 239.054l1.732.181-.543 5.203-1.732-.181zM470.18 237.775l1.703.363-1.091 5.116-1.703-.363zM462.933 235.745l1.655.538-1.618 4.974-1.655-.538zM455.912 232.976l1.594.711-2.131 4.777-1.594-.711zM442.944 225.278l1.409 1.022-3.072 4.233-1.409-1.022zM437.163 220.444l1.295 1.163-3.495 3.891-1.295-1.163zM557.583 175.896l.182-1.729 5.203.547-.182 1.729zM427.216 209.122l1.023 1.407-4.229 3.076-1.023-1.407zM419.822 195.986l.708 1.589-4.777 2.127-.708-1.589zM417.188 188.931l.535 1.657-4.979 1.608-.535-1.657zM415.338 181.617l.362 1.702-5.114 1.088-.362-1.702zM414.241 174.129l.182 1.729-5.201.546-.182-1.729zM414.421 159.06l-.182 1.73-5.201-.546.182-1.73zM415.687 151.623l-.362 1.704-5.114-1.088.362-1.704zM417.729 144.367l-.535 1.657-4.974-1.606.535-1.657zM419.818 138.965l.708-1.588-4.776-2.132-.709 1.595zM428.218 124.402l-1.024 1.408-4.232-3.076 1.024-1.408zM433.027 118.605l-1.164 1.292-3.887-3.502 1.164-1.292zM438.441 113.332l-1.295 1.165-3.498-3.888 1.295-1.165zM444.331 108.667l-1.409 1.021-3.069-4.235 1.409-1.021zM457.476 101.299l-1.594.708-2.124-4.781 1.594-.708zM464.563 98.657l-1.654.539-1.621-4.974 1.654-.539zM471.877 96.828l-1.703.362-1.089-5.116 1.703-.362zM479.347 95.748l-1.731.184-.552-5.2 1.731-.184zM557.768 160.835l-.182-1.73 5.201-.546.182 1.73zM556.672 153.363l-.363-1.704 5.114-1.09.363 1.704zM554.813 146.033l-.537-1.657 4.976-1.613.537 1.657zM551.48 137.377l.708 1.588 4.779-2.125-.707-1.595zM544.839 125.832l-1.025-1.408 4.228-3.078 1.025 1.408zM540.148 119.917l-1.168-1.292 3.878-3.506 1.168 1.292zM534.882 114.501l-1.293-1.165 3.501-3.885 1.293 1.165zM529.04 109.707l-1.41-1.021 3.067-4.234 1.41 1.021zM516.11 102.015l-1.589-.708 2.128-4.778 1.589.708zM509.086 99.235l-1.654-.539 1.621-4.976 1.654.539zM501.82 97.148l-1.705-.362 1.088-5.118 1.705.362zM431.844 215.055l1.164 1.295-3.89 3.497-1.164-1.295zM494.407 95.93l-1.731-.184.551-5.203 1.731.184z"/></g><g stroke-width="2" fill="none"><ellipse stroke="#66899A" cx="481.409" cy="170.426" rx="20.336" ry="149.132"/><ellipse transform="matrix(-.913 -.407 .407 -.913 851.879 521.925)" stroke="#E1D85D" cx="481.409" cy="170.426" rx="149.132" ry="20.336"/><ellipse transform="matrix(.913 -.407 .407 .913 -27.699 210.541)" stroke="#80A3CF" cx="481.409" cy="170.426" rx="149.132" ry="20.336"/></g><circle fill="#66899A" stroke="#fff" stroke-width="2" cx="497.508" cy="78.931" r="14.405"/>
<path class="element-atom-1" fill="#E5D015" stroke="#fff" stroke-miterlimit="10" d="M555.479 200.33h5.568v-4.019c4.071-.985 6.582-3.812 6.582-7.565 0-3.842-2.041-6.195-6.825-7.868-1.756-.639-3.786-1.476-3.786-2.225 0-.985 1.384-1.137 2.207-1.137 2.407 0 3.947.741 4.869 1.183l1.059.507.336-1.116 1.32-4.962-.733-.346c-.976-.459-2.537-1.033-4.842-1.23v-3.335h-5.568v3.731c-3.866 1.005-6.249 3.741-6.249 7.334 0 4.632 3.909 6.54 7.316 7.688 2.894.976 3.295 1.681 3.295 2.294 0 .912-1.314 1.32-2.615 1.32-2.536 0-4.644-.945-5.671-1.509l-1.098-.6-1.604 6.267v.001l.658.363c1.485.822 3.674 1.401 5.782 1.591v3.633z" /><g fill="#80A3CF" stroke="#fff" stroke-width="2">
<path d="M387.995 214.209c-8.832 0-15.991 5.506-15.991 12.301 0 3.331 1.725 6.36 4.524 8.574-.162 2.258-.706 5.021-2.281 6.51 3.134 0 6.337-1.963 8.362-3.498 1.683.463 3.493.716 5.385.716 8.832 0 15.991-5.503 15.991-12.301.001-6.796-7.158-12.302-15.99-12.302zM408.251 227.708c1.346-1.798 2.116-3.89 2.116-6.119 0-6.795-7.159-12.301-15.991-12.301-3.887 0-7.45 1.068-10.22 2.839 1.304-.246 2.667-.379 4.069-.379 9.511 0 17.221 6.059 17.221 13.531 0 2.945-1.193 5.673-3.228 7.89 2.02 1.535 5.228 3.503 8.362 3.503-2.228-2.115-2.388-6.804-2.329-8.964z"/></g>
<path fill="#DF5C4D" d="M536.5 137.833v61l-52 28.5-51-28.5v-61l51-28.5z"/>
<path fill="#BC4A3D" d="M530.5 141.387v53.893l-45.942 25.179-45.058-25.179v-53.893l45.058-25.18z"/><text transform="translate(456.5 186.333)" fill="#fff" font-family="'PTMono-Bold'" font-size="48">VS</text>
...
...
...
</svg>

0 个答案:

没有答案