javascript - 如何翻译svg的路径

Question

我有一个 svg 速度计。我想创建一些动画。有一根针，是由路径组成的。我已经对该路径进行了分组，以便我可以翻译或转换。它是一个仪表/指针，必须随着用户提供的值而移动。如果用户提供 0 到 25 之间的值，则针应位于第一个切片，依此类推。但我不知道如何移动由路径组成的针。

我已经创建了它的 jsbin

http://jsbin.com/danefehiro/1/edit?html,js,output

这是代码

<input type="text" id="speedValue" />
<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"
     viewBox="0 0 344.996 344.996" xml:space="preserve">
<g>
    <path fill="rgb(132, 219, 255)" d="M7.5,243.337h52.227c0-31.141,12.622-59.334,33.03-79.741l-36.93-36.93
        C25.968,156.525,7.5,197.774,7.5,243.337z"/>
    <path fill="rgb(84, 192, 235)" d="M55.827,126.666l36.93,36.93c20.408-20.408,48.6-33.03,79.741-33.03V78.339
        C126.935,78.339,85.685,96.807,55.827,126.666z"/>
    <circle style="fill:#51B3DA;" cx="172.498" cy="243.337" r="23.32"/>
    <path fill="rgb(255, 209, 92)" d="M337.496,243.337h-52.227c0-31.141-12.622-59.334-33.03-79.741l36.93-36.93
        C319.028,156.525,337.496,197.774,337.496,243.337z"/>
    <path fill="rgb(255, 112, 88)" d="M289.169,126.666l-36.93,36.93c-20.408-20.408-48.6-33.03-79.741-33.03V78.339
        C218.061,78.339,259.311,96.807,289.169,126.666z"/>
    <g id="meter">
        <path fill="#40596B" id="needle" d="M175.884,220.29c10.162,1.482,18.179,9.5,19.661,19.662l44.785-64.447L175.884,220.29z"/>
    </g>
</g>
</svg>


  var speedValue = document.querySelector('#speedValue');
  var needle = document.querySelector('#needle');
  var meter = document.querySelector('#needle');
  speedValue.addEventListener("click", function(event){
    var value = event.target.value;
    // if value is in between 1 - 25, the needle
    // should be on first block, if 25 - 50, then
    // the needle should be on second slice and if
    // 50  - 75, then on 3rd slice and if 75 - 100
    // then on last slice
    if (value >= 0 && value <= 25) {
      meter.setAttribute("transform", "rotate(45)");
    } else if(value > 25 && value <= 50) {
      meter.setAttribute("transform", "rotate(90)"); 
    } else {
      meter.setAttribute("transform", "rotate(180)"); 
    }
  });

Answer 1

当 #meter 路径默认旋转 135 度时，您为自己设置了一个陷阱，并且您缺少图表的变换原点。作品如下:

var speedValue = document.querySelector('#speedValue');
var needle = document.querySelector('#needle');
var meter = document.querySelector('#meter');
speedValue.addEventListener("click", function(event){
  var value = event.target.value;
  // if value is in between 1 - 25, the needle
  // should be on first block, if 25 - 50, then
  // the needle should be on second slice and if
  // 50  - 75, then on 3rd slice and if 75 - 100
  // then on last slice
  needle.setAttribute("transform-origin", "172.498px 243.337px");
  if (value >= 0 && value <= 25) {
    needle.setAttribute("transform", "rotate(-112.5)"); // 45 / 2 - 135 = -112.5
  } else if(value > 25 && value <= 50) {
    needle.setAttribute("transform", "rotate(-67.5)"); 
  } else if(value > 50 && value <= 75) {
    needle.setAttribute("transform", "rotate(-22.5)"); 
  } else {
    needle.setAttribute("transform", "rotate(22.5)"); 
  }
});

我添加了一个 onLoad 监听器，以便从一开始就正确定位针的方向。

window.addEventListener("load", function(event){
  var value = event.target.value;
  needle.setAttribute("transform-origin", "172.498px 243.337px");
  needle.setAttribute("transform", "rotate(-112.5)");
});

<小时/>

根据评论，添加了一个 animateTransform 元素来向您展示如何使用它(即使它应该属于一个新问题)。

一个新的 jsbin:http://jsbin.com/qexohozido/1/edit?html,js,output

首先在#needle下添加元素:

<animateTransform id="animation" attributeName="transform" type="rotate" from="0 172.498 243.337" to="0 172.498 243.337" dur="1s" fill="freeze" restart="whenNotActive"/>

然后在 if-else 中为其设置动画:

var from = 0;
var animation = document.querySelector('#animation');
... else if(value > 50 && value <= 75) {
  animation.setAttribute("from", from + " 172.498 243.337");
  animation.setAttribute("to", "90 172.498 243.337");
  animation.beginElement();
  from = 90; 
} ...

在这种情况下，您不需要在 #animation 中偏移 -135 度，因为在 onLoad 期间旋转已经在 #needle 中偏移。