Question

我正在尝试重现我刚才看到的一些动画SVG时钟的东西。一切正常，但我无法绕过似乎不起作用的变换原点......路径的制作方式是什么？

// Real time clock animation

let sec = document.querySelector('.seconds-lancet');
let min = document.querySelector('.minutes-lancet');
let hour = document.querySelector('.hours-lancet');

setInterval(function() {
  let d = new Date();
  function r(el, deg) {
    el.setAttribute('transform', 'rotate('+ deg +')');
  }
  r(sec, 6*d.getSeconds());
  r(min, 6*d.getMinutes());
  r(hour, 30*(d.getHours()%12) + d.getMinutes()/2);
}, 1000);

.seconds-lancet,
.minutes-lancet,
.hours-lancet {
  transform-origin: bottom center !important;
}

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 621.07 768">
      <g id="clock">
        <circle cx="70.64" cy="107.54" r="41.2" fill="#cdcfd0" opacity=".81" transform="rotate(-80.78 70.641 107.542)"/>
        <path fill="#034732" d="M112.62 99.31c0-19-14.55-34.39-32.5-34.39s-32.5 15.4-32.5 34.39v8.42l64.45 1.21z"/>
        <path fill="#034732" d="M116.79 114l-74.17-1.39v-13.3c0-21.72 16.83-39.39 37.5-39.39s37.5 17.67 37.5 39.39v.28zm-64.17-11.18l54.74 1 .26-4.68c-.07-16.14-12.38-29.22-27.5-29.22s-27.5 13.18-27.5 29.39z"/>
        <circle cx="80.29" cy="107.1" r="34.38" fill="#fff"/>
        <path fill="#008048" d="M80.29 145a37.93 37.93 0 1 1 37.93-37.93A38 38 0 0 1 80.29 145zm0-68.77a30.84 30.84 0 1 0 30.84 30.84 30.88 30.88 0 0 0-30.84-30.81z"/>
        <path fill="#ffffff" d="M80.29 138.14a31.07 31.07 0 1 1 12.09-59.7A31.18 31.18 0 0 1 108.92 95a31 31 0 0 1-6.66 34 31.2 31.2 0 0 1-9.88 6.66 30.87 30.87 0 0 1-12.09 2.48z"/>
        <path fill="#034732" d="M77.29 84.72l-.67.2h-.21a.5.5 0 0 1-.12-1l1-.32a2.14 2.14 0 0 1 .56-.1.56.56 0 0 1 .57.57v5.51a.57.57 0 1 1-1.14 0zM80 89.05l2-1.71c.89-.75 1.22-1.17 1.22-1.76a1 1 0 0 0-1-1 1.61 1.61 0 0 0-1.29.72.49.49 0 0 1-.4.18A.52.52 0 0 1 80 85a.63.63 0 0 1 .13-.36 2.53 2.53 0 0 1 2.16-1 2 2 0 0 1 2.15 1.95c0 1-.54 1.58-1.69 2.52l-1.34 1.12H84a.5.5 0 0 1 0 1h-3.7a.55.55 0 0 1-.61-.54.68.68 0 0 1 .31-.64zM99.72 109.68a.59.59 0 0 1 .8-.86 2.12 2.12 0 0 0 1.59.66 1.09 1.09 0 0 0 1.21-1c0-.68-.63-1.06-1.61-1.06h-.25a.53.53 0 0 1-.53-.52.66.66 0 0 1 .26-.49l1.64-1.73h-2.54a.53.53 0 0 1-.54-.52.54.54 0 0 1 .54-.53h3.58a.55.55 0 0 1 .6.53.86.86 0 0 1-.35.66l-1.64 1.68c1.06.13 2 .66 2 1.93a2.21 2.21 0 0 1-2.44 2.18 3.31 3.31 0 0 1-2.32-.93zM78.51 129.87a3.16 3.16 0 0 1-.79-2.48c0-2 .94-3.53 2.78-3.53a2.83 2.83 0 0 1 1.63.46.55.55 0 0 1 .28.49.54.54 0 0 1-.54.53.55.55 0 0 1-.29-.08 1.94 1.94 0 0 0-1.12-.36c-1 0-1.5.87-1.56 2.06a2.26 2.26 0 0 1 3.83 1.39 2.26 2.26 0 0 1-2.41 2.21 2.39 2.39 0 0 1-1.81-.69zm3.08-1.48a1.34 1.34 0 0 0-2.65 0 1.22 1.22 0 0 0 1.35 1.16 1.17 1.17 0 0 0 1.3-1.16zM57.16 109.89a.53.53 0 0 1-.26-.47.52.52 0 0 1 .54-.52.63.63 0 0 1 .31.09 1.94 1.94 0 0 0 1.19.4c1 0 1.53-.84 1.57-2A1.93 1.93 0 0 1 59 108a2.06 2.06 0 0 1-2.3-2.06 2.26 2.26 0 0 1 2.42-2.25 2.4 2.4 0 0 1 1.81.69 3.3 3.3 0 0 1 .78 2.48c0 2.08-1 3.53-2.79 3.53a2.94 2.94 0 0 1-1.76-.5zm3.31-4a1.23 1.23 0 0 0-1.35-1.19 1.19 1.19 0 0 0-1.29 1.2 1.18 1.18 0 0 0 1.32 1.16 1.2 1.2 0 0 0 1.32-1.15z"/>
        <rect width="2.32" height=".98" x="51.17" y="106.63" fill="#008048" rx=".43" ry=".43"/>
        <path fill="#008048" d="M80.91 80c0 .24-.17.36-.41.36h-.2a.33.33 0 0 1-.37-.36v-1.51c0-.23.13-.49.37-.49h.2a.47.47 0 0 1 .41.49z"/>
        <rect width="2.32" height=".98" x="106.97" y="106.63" fill="#008048" rx=".43" ry=".43"/>
        <rect width=".98" height="2.32" x="79.93" y="133.68" fill="#008048" rx=".43" ry=".43"/>
        <path fill="#008048" d="M65.73 131.33a.4.4 0 0 0 .11.53.38.38 0 0 0 .53-.11l.63-1a.38.38 0 0 0-.11-.53.38.38 0 0 0-.53.11zM55.6 120.8a.39.39 0 0 0-.15.52.39.39 0 0 0 .52.15l1-.56a.39.39 0 0 0 .15-.52.39.39 0 0 0-.53-.15zM56 92.41a.38.38 0 0 0-.53.11.4.4 0 0 0 .11.53l1 .63a.39.39 0 0 0 .53-.11.37.37 0 0 0-.11-.53zM66.49 82.28a.37.37 0 0 0-.52-.15.38.38 0 0 0-.14.52l.55 1a.38.38 0 0 0 .52.15.37.37 0 0 0 .15-.52zM94.86 82.79a.38.38 0 0 0-.11-.53.38.38 0 0 0-.53.1l-.63 1a.37.37 0 0 0 .11.53.38.38 0 0 0 .53-.11zM105 93.32a.39.39 0 0 0 .15-.52.37.37 0 0 0-.52-.15l-1 .56a.38.38 0 0 0-.14.52.38.38 0 0 0 .52.14zM104.63 121.58a.38.38 0 0 0 .53-.11.39.39 0 0 0-.11-.53l-1-.63a.37.37 0 0 0-.53.11.38.38 0 0 0 .11.53zM94.1 131.71a.39.39 0 0 0 .52.15.39.39 0 0 0 .15-.52l-.56-1a.38.38 0 0 0-.52-.14.37.37 0 0 0-.15.52z"/>
        <g id="hands">
          <path class="minutes-lancet" fill="#2e2c2b" d="M81.26 107h-1.93l.3-30.58c0-.23.25-.42.56-.42.31 0 .56.19.56.42z"/>
          <path class="hours-lancet" fill="#2e2c2b" d="M81.48 107h-2.3l.35-22.69c0-.17.31-.31.67-.31.37 0 .67.14.67.31z"/>
          <path class="seconds-lancet" fill="#008048" d="M81.06 109H79.6l.23-32.55a.44.44 0 0 1 .42-.45.45.45 0 0 1 .43.45z"/>
          <circle cx="80.28" cy="107" r="2" fill="#034732"/>
        </g>
      </g>
</svg>

由于

Answer 1

看起来你假设变换框是填充框，默认情况下它不是视图框。设置transform-box：fill-box;似乎让事情变得更好。

// Real time clock animation

let sec = document.querySelector('.seconds-lancet');
let min = document.querySelector('.minutes-lancet');
let hour = document.querySelector('.hours-lancet');

setInterval(function() {
  let d = new Date();
  function r(el, deg) {
    el.setAttribute('transform', 'rotate('+ deg +')');
  }
  r(sec, 6*d.getSeconds());
  r(min, 6*d.getMinutes());
  r(hour, 30*(d.getHours()%12) + d.getMinutes()/2);
}, 1000);

.seconds-lancet,
.minutes-lancet,
.hours-lancet {
  transform-origin: bottom center !important;
  transform-box: fill-box;
}

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 621.07 768">
      <g id="clock">
        <circle cx="70.64" cy="107.54" r="41.2" fill="#cdcfd0" opacity=".81" transform="rotate(-80.78 70.641 107.542)"/>
        <path fill="#034732" d="M112.62 99.31c0-19-14.55-34.39-32.5-34.39s-32.5 15.4-32.5 34.39v8.42l64.45 1.21z"/>
        <path fill="#034732" d="M116.79 114l-74.17-1.39v-13.3c0-21.72 16.83-39.39 37.5-39.39s37.5 17.67 37.5 39.39v.28zm-64.17-11.18l54.74 1 .26-4.68c-.07-16.14-12.38-29.22-27.5-29.22s-27.5 13.18-27.5 29.39z"/>
        <circle cx="80.29" cy="107.1" r="34.38" fill="#fff"/>
        <path fill="#008048" d="M80.29 145a37.93 37.93 0 1 1 37.93-37.93A38 38 0 0 1 80.29 145zm0-68.77a30.84 30.84 0 1 0 30.84 30.84 30.88 30.88 0 0 0-30.84-30.81z"/>
        <path fill="#ffffff" d="M80.29 138.14a31.07 31.07 0 1 1 12.09-59.7A31.18 31.18 0 0 1 108.92 95a31 31 0 0 1-6.66 34 31.2 31.2 0 0 1-9.88 6.66 30.87 30.87 0 0 1-12.09 2.48z"/>
        <path fill="#034732" d="M77.29 84.72l-.67.2h-.21a.5.5 0 0 1-.12-1l1-.32a2.14 2.14 0 0 1 .56-.1.56.56 0 0 1 .57.57v5.51a.57.57 0 1 1-1.14 0zM80 89.05l2-1.71c.89-.75 1.22-1.17 1.22-1.76a1 1 0 0 0-1-1 1.61 1.61 0 0 0-1.29.72.49.49 0 0 1-.4.18A.52.52 0 0 1 80 85a.63.63 0 0 1 .13-.36 2.53 2.53 0 0 1 2.16-1 2 2 0 0 1 2.15 1.95c0 1-.54 1.58-1.69 2.52l-1.34 1.12H84a.5.5 0 0 1 0 1h-3.7a.55.55 0 0 1-.61-.54.68.68 0 0 1 .31-.64zM99.72 109.68a.59.59 0 0 1 .8-.86 2.12 2.12 0 0 0 1.59.66 1.09 1.09 0 0 0 1.21-1c0-.68-.63-1.06-1.61-1.06h-.25a.53.53 0 0 1-.53-.52.66.66 0 0 1 .26-.49l1.64-1.73h-2.54a.53.53 0 0 1-.54-.52.54.54 0 0 1 .54-.53h3.58a.55.55 0 0 1 .6.53.86.86 0 0 1-.35.66l-1.64 1.68c1.06.13 2 .66 2 1.93a2.21 2.21 0 0 1-2.44 2.18 3.31 3.31 0 0 1-2.32-.93zM78.51 129.87a3.16 3.16 0 0 1-.79-2.48c0-2 .94-3.53 2.78-3.53a2.83 2.83 0 0 1 1.63.46.55.55 0 0 1 .28.49.54.54 0 0 1-.54.53.55.55 0 0 1-.29-.08 1.94 1.94 0 0 0-1.12-.36c-1 0-1.5.87-1.56 2.06a2.26 2.26 0 0 1 3.83 1.39 2.26 2.26 0 0 1-2.41 2.21 2.39 2.39 0 0 1-1.81-.69zm3.08-1.48a1.34 1.34 0 0 0-2.65 0 1.22 1.22 0 0 0 1.35 1.16 1.17 1.17 0 0 0 1.3-1.16zM57.16 109.89a.53.53 0 0 1-.26-.47.52.52 0 0 1 .54-.52.63.63 0 0 1 .31.09 1.94 1.94 0 0 0 1.19.4c1 0 1.53-.84 1.57-2A1.93 1.93 0 0 1 59 108a2.06 2.06 0 0 1-2.3-2.06 2.26 2.26 0 0 1 2.42-2.25 2.4 2.4 0 0 1 1.81.69 3.3 3.3 0 0 1 .78 2.48c0 2.08-1 3.53-2.79 3.53a2.94 2.94 0 0 1-1.76-.5zm3.31-4a1.23 1.23 0 0 0-1.35-1.19 1.19 1.19 0 0 0-1.29 1.2 1.18 1.18 0 0 0 1.32 1.16 1.2 1.2 0 0 0 1.32-1.15z"/>
        <rect width="2.32" height=".98" x="51.17" y="106.63" fill="#008048" rx=".43" ry=".43"/>
        <path fill="#008048" d="M80.91 80c0 .24-.17.36-.41.36h-.2a.33.33 0 0 1-.37-.36v-1.51c0-.23.13-.49.37-.49h.2a.47.47 0 0 1 .41.49z"/>
        <rect width="2.32" height=".98" x="106.97" y="106.63" fill="#008048" rx=".43" ry=".43"/>
        <rect width=".98" height="2.32" x="79.93" y="133.68" fill="#008048" rx=".43" ry=".43"/>
        <path fill="#008048" d="M65.73 131.33a.4.4 0 0 0 .11.53.38.38 0 0 0 .53-.11l.63-1a.38.38 0 0 0-.11-.53.38.38 0 0 0-.53.11zM55.6 120.8a.39.39 0 0 0-.15.52.39.39 0 0 0 .52.15l1-.56a.39.39 0 0 0 .15-.52.39.39 0 0 0-.53-.15zM56 92.41a.38.38 0 0 0-.53.11.4.4 0 0 0 .11.53l1 .63a.39.39 0 0 0 .53-.11.37.37 0 0 0-.11-.53zM66.49 82.28a.37.37 0 0 0-.52-.15.38.38 0 0 0-.14.52l.55 1a.38.38 0 0 0 .52.15.37.37 0 0 0 .15-.52zM94.86 82.79a.38.38 0 0 0-.11-.53.38.38 0 0 0-.53.1l-.63 1a.37.37 0 0 0 .11.53.38.38 0 0 0 .53-.11zM105 93.32a.39.39 0 0 0 .15-.52.37.37 0 0 0-.52-.15l-1 .56a.38.38 0 0 0-.14.52.38.38 0 0 0 .52.14zM104.63 121.58a.38.38 0 0 0 .53-.11.39.39 0 0 0-.11-.53l-1-.63a.37.37 0 0 0-.53.11.38.38 0 0 0 .11.53zM94.1 131.71a.39.39 0 0 0 .52.15.39.39 0 0 0 .15-.52l-.56-1a.38.38 0 0 0-.52-.14.37.37 0 0 0-.15.52z"/>
        <g id="hands">
          <path class="minutes-lancet" fill="#2e2c2b" d="M81.26 107h-1.93l.3-30.58c0-.23.25-.42.56-.42.31 0 .56.19.56.42z"/>
          <path class="hours-lancet" fill="#2e2c2b" d="M81.48 107h-2.3l.35-22.69c0-.17.31-.31.67-.31.37 0 .67.14.67.31z"/>
          <path class="seconds-lancet" fill="#008048" d="M81.06 109H79.6l.23-32.55a.44.44 0 0 1 .42-.45.45.45 0 0 1 .43.45z"/>
          <circle cx="80.28" cy="107" r="2" fill="#034732"/>
        </g>
      </g>
</svg>

SVG时钟 - 转换原点不适用于刺血针

1 个答案: