Question

我对svg动画有疑问。请找到我的代码here。使用javascript，我将 animateMotion 元素添加到红色箭头符号。我想实现以下目标

箭头应在矩形指定的路径上移动并旋转以与路径的坡度对齐（因此旋转90度）

我可以部分满足此要求。沿给定路径移动箭头非常简单。 JS脚本正在为animateMotion元素设置路径属性。我想使用rotate属性来适应对路径的旋转更改。请看看，当您取消注释此行

animateMotion.setAttribute（“ rotate”，“ auto”）;

在JS代码中，发生了一些奇怪的事情。而是在到达每个角箭头后旋转90度，意外消失。你知道为什么吗？

非常感谢您。

xAxis: [{
  type: 'datetime',
  endOnTick: false,
  tickInterval: 30 * 24 * 3600 * 1000,
  max: 1536278400000,
  width: '65%',
  labels: {
    useHTML: true,
    rotation: -90
  },
  dateTimeLabelFormats: { // don't display the dummy year
    month: '%b-%y',
    year: '%Y'
  },
  plotLines: [{
    color: 'gray',
    dashStyle: 'longdashdot',
    value: 1536278400000,
    width: 1,
    label: {
      text: 'Selected Date'
    }
  }]
}, {
  min: 1536278400000,
  startOnTick: false,
  offset: 0,
  type: 'datetime',
  tickInterval: 180 * 24 * 3600 * 1000,
  labels: {
    useHTML: true,
    rotation: -90
  },
  dateTimeLabelFormats: { // don't display the dummy year
    month: '%b-%y',
    year: '%Y'
  },
  width: '35%',
  left: '65%'
}]

class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }
}

function getArrowSymbolXcoordinate(pathAttribute) {
  var commaIdx = pathAttribute.indexOf(',');
  return pathAttribute.substring(1,commaIdx);
}

function getArrowSymbolYcoordinate(pathAttribute) {
  var commaIdx = pathAttribute.indexOf(',');
  var lineCommandIdx = pathAttribute.indexOf('l');
  console.log(pathAttribute.substring(commaIdx, lineCommandIdx));
  return pathAttribute.substring(commaIdx+1, lineCommandIdx);
}


function getTopPathAttribute(element, xCoordinate) {
  var toTopRightCorrner = Math.abs(topRightCorrner.x - xCoordinate);
  var path = 'm0,0 ' + 'h' + toTopRightCorrner + ' v' + height + ' h-' + width + ' v-' + height + ' z';
  return path;
}


let topLeftCorrner = new Point(200,100);
let topRightCorrner = new Point(350,100);
let bottomLeftCorrner = new Point(200,150);
let bottomRightCorrner = new Point(350,150);

let topArrowSymbols = Array.from(document.getElementsByClassName('top'));

let width = Math.abs(topLeftCorrner.x - topRightCorrner.x);
let height = Math.abs(topLeftCorrner.y - bottomLeftCorrner.y);

topArrowSymbols.forEach( function(element) {
  var xCoordinate = getArrowSymbolXcoordinate(element.getAttribute('d'));
  var animateMotion = document.createElementNS('http://www.w3.org/2000/svg', "animateMotion");
  var pathAttribute = getTopPathAttribute(element, xCoordinate);
  animateMotion.setAttribute("dur", "7s");
  animateMotion.setAttribute("path", pathAttribute);
  //animateMotion.setAttribute("rotate", 'auto');
  element.appendChild(animateMotion);
});

body {
	height: 100vh;
}

<animatemotion>元素的SVG旋转属性设置为自动不能正常工作

0 个答案: