Вращать группу SVG на неопределенный срок на 360 градусов без CSS или Java

Я впервые погружаюсь в SVG. Можно ли бесконечно вращать эту группу на 360 без css или javascript/jquery? Пока он вращается в верхнем левом углу, но я не могу понять, как его центрировать.

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<svg width="576" height="576" viewBox="0 0 288 288" xmlns="http://www.w3.org/2000/svg" version="1.1">
<g id="seed" transform="translate(144,144)" stroke-width="2" stroke="black" fill="none" >
<circle cx="0" r="64" />
<circle cx="64" r="64" />
<circle cx="64" r="64" transform="rotate(60)" />
<circle cx="64" r="64" transform="rotate(120)" />
<circle cx="64" r="64" transform="rotate(180)" />
<circle cx="64" r="64" transform="rotate(240)" />
<circle cx="64" r="64" transform="rotate(300)" />
<circle cx="0" r="128" />
<animateTransform attributeType="xml" attributeName="transform" type="rotate" values="0 0 0; 360 0 0" dur="5s" repeatCount="indefinite" />
</g>
</svg>

svg svg-animate
person Michael    schedule 07.06.2013    source источник

Ответы (2)


arrow_upward
5
arrow_downward

Ваш animateTransform перезаписывает преобразование элемента <g>. Похоже, вы хотите предоставить дополнительное преобразование, которое вы бы сделали с атрибутом additive="sum"

<svg width="576" height="576" viewBox="0 0 288 288" xmlns="http://www.w3.org/2000/svg" version="1.1">
<g id="seed" transform="translate(144,144)" stroke-width="2" stroke="black" fill="none" >
<circle cx="0" r="64" />
<circle cx="64" r="64" />
<circle cx="64" r="64" transform="rotate(60)" />
<circle cx="64" r="64" transform="rotate(120)" />
<circle cx="64" r="64" transform="rotate(180)" />
<circle cx="64" r="64" transform="rotate(240)" />
<circle cx="64" r="64" transform="rotate(300)" />
<circle cx="0" r="128" />
<animateTransform attributeType="xml" attributeName="transform" type="rotate" values="0 0 0; 360 0 0" dur="5s" additive="sum" repeatCount="indefinite" />
</g>
</svg>
person Robert Longson    schedule 08.06.2013
comment
Вау, попал! Большое спасибо! - person Michael; 08.06.2013

arrow_upward
0
arrow_downward

PaEDIT: Плохо, что вы, вероятно, имеете в виду JavaScript.

Хорошо, вы можете вычислить центр с помощью JavaScript и хорошего SVG-метода, называемого getBBox();

Способ вернуть центр SVG-элементов, поэтому ваш также должен быть возможен. Хорошо кусок кода

 var svg = {    
 getCenterPosition:  function(elem) {

        // use the native SVG interface to get it's boundingBox
        var bbox                = elem.getBBox();
        // return the center of the bounding box
        return {
            px: (bbox.x + bbox.width / 2).toFixed(2),
            py: (bbox.y + bbox.height / 2).toFixed(2)
        };
    }
}

svg.getCenterPosition (вашGElementAsParameter); вернет координаты центра. (консоль веб-разработчика или Firebug или что-то еще). Затем вы можете установить эти координаты в своих атрибутах, но не изменяйте окно просмотра или что-либо еще, что теперь будет вращаться вокруг своего центра.

person myradon    schedule 29.07.2013