CSS到SVG Loader Image

Question

我正在尝试在SVG中复制这个优秀的Loader。这是我有多远gotten。我遇到的困难是SVG似乎被设计为在矩形（x，y）类型坐标中工作。我想知道是否有办法使用径向坐标（r，theta）？如果有人能让我朝着正确的方向前进，那将非常感激。是否使用SVG的方式去了？

所需的加载程序截图：

我目前的进度截图：

Answer 1

这可能不是您想要的，但它可能提供一个起点，可能会帮助您使装载机正常工作。

使用JavaScript可以构建SVG并避免重复：

<div id="container">
<svg id="svg" viewBox="0 0 300 300">
   <defs>
      <rect id="r" x="50" y="-10" height="20" width="75" rx="10"/>
      <g id="g">
        <animateTransform
            attributeName="transform" begin="0s" dur="1s"
            type="rotate" 
            values="330;300;270;240;210;180;150;120;90;60;30"
            repeatCount="indefinite" 
            calcMode="discrete"
        />
        <use xlink:href="#r" opacity="1"/>
        <use xlink:href="#r" opacity=".9"  transform="rotate(30)  scale(0.95)" />
        <use xlink:href="#r" opacity=".8"  transform="rotate(60)  scale(0.9)"  />
        <use xlink:href="#r" opacity=".7"  transform="rotate(90)  scale(0.85)" />
        <use xlink:href="#r" opacity=".6"  transform="rotate(120) scale(0.8)"  />
        <use xlink:href="#r" opacity=".5"  transform="rotate(150) scale(0.75)" />
        <use xlink:href="#r" opacity=".4"  transform="rotate(180) scale(0.7) " />
        <use xlink:href="#r" opacity=".3"  transform="rotate(210) scale(0.65)" />
        <use xlink:href="#r" opacity=".2"  transform="rotate(240) scale(0.6) " />
        <use xlink:href="#r" opacity=".15" transform="rotate(270) scale(0.55)" />
        <use xlink:href="#r" opacity=".1"  transform="rotate(300) scale(0.5)"  />
        <use xlink:href="#r" opacity=".05" transform="rotate(330) scale(0.45)" />
      </g>
    </defs>
    <use id="loader" xlink:href="#g" transform="translate(150,150)"></use>
</svg>

在此处查看：JSFiddle

更新：这是使用相同组件的另一个JSFiddle。这个也在旋转时动画颜色。