我想用 SVG 制作这个图形。我可以使用<animate>标签，也可以使用 javascript 操作 SVG 文档。如果可能的话，我更愿意在 SVG 中完成这一切。
问问题
484 次
4 回答
5
这是一个更简单的例子：
<svg height="200" width="200" viewBox="0 0 144 144">
<circle cx="72" cy="72" r="49" stroke-width="6" stroke="#F68524" fill="none"/>
<circle cx="72" cy="72" r="49"
stroke-width="6" stroke="#838588" fill="none">
<animate attributeName="stroke-dasharray" values="154 0;0 154" dur="1s" repeatCount="indefinite"/>
</circle>
</svg>
用于 的正确值stroke-dasharray基于圆的周长 ，2 * π * r我们想要其中的一半，因此将其除以 2。在计算到大约 154 的示例中。
见jsfiddle。
更新： 非常接近，但不完全相同，如前所述。这是一个也为颜色设置动画的版本：
<svg height="200" width="200" viewBox="0 0 144 144">
<circle cx="72" cy="72" r="49" stroke-width="6" stroke="#F68524" fill="none">
<animate attributeName="stroke" values="#838588;#F68524"
dur="2s" calcMode="discrete" repeatCount="indefinite"/>
</circle>
<circle cx="72" cy="72" r="49"
stroke-width="6" stroke="#838588" fill="none">
<animate attributeName="stroke-dasharray" values="154 0;0 154"
dur="1s" repeatCount="indefinite"/>
<animate attributeName="stroke" values="#F68524;#838588"
dur="2s" calcMode="discrete" repeatCount="indefinite"/>
</circle>
</svg>
见jsfiddle。
于 2014-02-28T14:45:14.880 回答
1
这只是一个起点的想法。然后，您可以应用蒙版来隐藏和显示图形的某些部分。
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
<circle cx="200" cy="200" r="100" fill="gray"/>
<rect x="100" y="200" height="101" width="201" fill="white">
<animateTransform attributeName="transform"
attributeType="XML"
type="rotate"
from="0 200 200"
to="360 200 200"
dur="5s"
repeatCount="indefinite"/>
</rect>
<circle cx="200" cy="200" r="90" fill="white"/>
</svg>
于 2014-02-26T16:42:24.927 回答
1
非常感谢@helderdarocha 为我指明了正确的方向。
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="144px" height="144px" viewBox="0 0 144 144" enable-background="new 0 0 144 144">
<defs>
<clipPath id="rotation-top" clip-path="url(#top-half)">
<rect x="0" y="72" height="72" width="144">
<animateTransform attributeName="transform"
attributeType="XML"
type="rotate"
from="360 72 72"
to="0 72 72"
dur="3s"
repeatCount="indefinite">
</animateTransform>
</rect>
</clipPath>
<clipPath id="rotation-bottom" clip-path="url(#bottom-half)">
<rect x="0" y="0" height="72" width="144">
<animateTransform attributeName="transform"
attributeType="XML"
type="rotate"
from="360 72 72"
to="0 72 72"
dur="3s"
repeatCount="indefinite">
</animateTransform>
</rect>
</clipPath>
<clipPath id="top-half">
<rect x="0" y="0" height="72" width="144">
</rect>
</clipPath>
<clipPath id="bottom-half">
<rect x="0" y="72" height="72" width="144">
</rect>
</clipPath>
</defs>
<!-- background white -->
<circle opacity="0.56" fill="#FFFFFF" cx="72" cy="72" r="72"/>
<!-- back gray color -->
<circle cx="72" cy="72" r="49" stroke-width="6" stroke="#838588" fill-opacity="0.0"/>
<!-- foreground orange color -->
<circle
cx="72" cy="72" r="49"
stroke-width="6" stroke="#F68524" fill-opacity="0.0"
clip-path="url(#rotation-bottom)"
/>
<circle
cx="72" cy="72" r="49"
stroke-width="6" stroke="#F68524" fill-opacity="0.0"
clip-path="url(#rotation-top)"
/>
</svg>
于 2014-02-26T17:50:18.457 回答
1
对于跨浏览器动画，最好使用 Javascript。（IE 不支持 SMIL）。setInterval 在所有浏览器中都非常健壮。
例如，要连续旋转一个元素，你可以使用：
function basicRotate()
{
var FPS=100 //----frames per second---
var angle = 0//---starting value---
function frame()
{
angle++
myElement.setAttribute("transform","rotate("+angle+" "+centetX+" "+centerY+")")
if (angle == 360)
angle=0
}
//---start interval timer---
var iT = setInterval(frame, 1000/FPS ) //---draw every 10ms ---
}
于 2014-02-26T22:23:02.627 回答