2

这是我第一次深入研究 SVG。是否可以在没有 css 或 javascript/jquery 的情况下无限期地旋转这个组 360？到目前为止，我让它在左上角旋转，但我似乎无法弄清楚如何将它居中。

<?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>
4

2 回答 2

5

您的 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>
于 2013-06-08T11:43:40.100 回答
0

PaEDIT：我的错，你可能是指 JavaScript。

好的，您可以使用 JavaScript 和一个名为 getBBox() 的漂亮 SVG 方法计算中心；

一种返回 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(yourGElementAsParameter); 将返回中心坐标。（Web 开发人员控制台或 Firebug 或其他东西）然后您可以在属性中设置这些坐标，但不要更改视图框或它现在将围绕其中心旋转的任何内容。

于 2013-07-29T19:18:16.160 回答