JavaScriptSVGLine連接移動元素影片-有解無憂

我有兩個 SVG 矩形；它們的兩個角由 SVGLine 連接，我正在嘗試為整體設定影片。

現在矩形正在使用該Element.animate()函式移動到一個新位置（新位置必須在運行時計算，所以我認為只有animate()在 JS 中才能使用該函式？）。
在那之前一切正常，但是當我嘗試為線條設定影片以使其在影片程序中仍然連接角時，它不會移動。
有沒有辦法將線條移動到新位置的影片？（我不能只是將屬性設定為新位置）。

如果我必須使用一個<path>或<polyline>某個東西來快速解釋我應該如何做那會很棒，因為path.animate([{points:...},{points:...}],{...})也沒有像我想要的那樣移動路徑。

這是一個我認為應該可以作業的快速代碼示例，但該行不會移動。

let svg = document.querySelector("#theSVG");
const SVGNS = "http://www.w3.org/2000/svg";

function drawing() {
  let rect = document.createElementNS(SVGNS, "rect");
  rect.setAttribute("x", 100);
  rect.setAttribute("y", 100);
  rect.setAttribute("width", 100);
  rect.setAttribute("height", 100);
  rect.setAttribute("stroke", "black");
  svg.appendChild(rect);

  let rect2 = document.createElementNS(SVGNS, "rect");
  rect2.setAttribute("x", 10);
  rect2.setAttribute("y", 10);
  rect2.setAttribute("width", 50);
  rect2.setAttribute("height", 25);
  rect2.setAttribute("stroke", "black");
  svg.appendChild(rect2);

  let line = document.createElementNS(SVGNS, "line");
  line.setAttribute("x1", rect.x.baseVal.value);
  line.setAttribute("x2", rect2.x.baseVal.value);
  line.setAttribute("y1", rect.y.baseVal.value);
  line.setAttribute("y2", rect2.y.baseVal.value);
  line.setAttribute("stroke", "darkgray");
  svg.appendChild(line);

  rect.animate([{
    x: rect.x.baseVal.value
  }, {
    x: '200px'
  }], {
    duration: 5000,
    iterations: 1
  });
  rect2.animate([{
    y: rect2.y.baseVal.value
  }, {
    y: '300px'
  }], {
    duration: 5000,
    iterations: 1
  });

  line.animate([{
    x1: line.x1.baseVal.value,
    y2: line.y2.baseVal.value
  }, {
    x1: '200px',
    y2: '300px'
  }], {
    duration: 5000,
    iterations: 1
  });
}
drawing();

<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 700 360" id="theSVG">
</svg>

uj5u.com熱心網友回復：

您只能使用animate()CSS 屬性。在 SVG 中，只有表現屬性被映射到 CSS。<line>'s x1, x2,y1和y2（奇怪地）不在這個串列中......

你應該能夠用一個<path>雖然來替換這個元素，影片它的d屬性。

let svg = document.querySelector("#theSVG");
const SVGNS = "http://www.w3.org/2000/svg";

function drawing() {
  let rect = document.createElementNS(SVGNS, "rect");
  rect.setAttribute("x", 100);
  rect.setAttribute("y", 100);
  rect.setAttribute("width", 100);
  rect.setAttribute("height", 100);
  rect.setAttribute("stroke", "black");
  svg.appendChild(rect);

  let rect2 = document.createElementNS(SVGNS, "rect");
  rect2.setAttribute("x", 10);
  rect2.setAttribute("y", 10);
  rect2.setAttribute("width", 50);
  rect2.setAttribute("height", 25);
  rect2.setAttribute("stroke", "black");
  svg.appendChild(rect2);

  let line = document.createElementNS(SVGNS, "path");
  line.setAttribute("d", `
    M${ rect.x.baseVal.value } ${ rect.y.baseVal.value }
    L${ rect2.x.baseVal.value } ${ rect2.y.baseVal.value }
  `);
  line.setAttribute("stroke", "darkgray");
  svg.appendChild(line);

  rect.animate([{
    x: '200px'
  }], {
    duration: 5000,
    iterations: 1
  });
  rect2.animate([{
    y: '300px'
  }], {
    duration: 5000,
    iterations: 1
  });

  line.animate([{
    d: `path("M200 ${ rect.y.baseVal.value }L${ rect2.x.baseVal.value } 300")`
  }], {
    duration: 5000,
    iterations: 1
  });
}
drawing();

<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 700 360" id="theSVG">
</svg>

但是，只有基于鉻的瀏覽器做支持CSSpath()的d屬性...

所以你可能不得不切換到SMIL 影片：

let svg = document.querySelector("#theSVG");
const SVGNS = "http://www.w3.org/2000/svg";

function drawing() {
  const rect = document.createElementNS(SVGNS, "rect");
  rect.setAttribute("x", 100);
  rect.setAttribute("y", 100);
  rect.setAttribute("width", 100);
  rect.setAttribute("height", 100);
  rect.setAttribute("stroke", "black");
  svg.appendChild(rect);
  const rectAnimateX = document.createElementNS(SVGNS, "animate");
  rectAnimateX.setAttribute("attributeName", "x");
  rectAnimateX.setAttribute("values", "100;200");
  rectAnimateX.setAttribute("dur", "5s");
  rect.append(rectAnimateX);
  
  let rect2 = document.createElementNS(SVGNS, "rect");
  rect2.setAttribute("x", 10);
  rect2.setAttribute("y", 10);
  rect2.setAttribute("width", 50);
  rect2.setAttribute("height", 25);
  rect2.setAttribute("stroke", "black");
  svg.appendChild(rect2);
  const rectAnimateY = document.createElementNS(SVGNS, "animate");
  rectAnimateY.setAttribute("attributeName", "y");
  rectAnimateY.setAttribute("values", "10;300");
  rectAnimateY.setAttribute("dur", "5s");
  rect2.append(rectAnimateY);

  const line = document.createElementNS(SVGNS, "line");
  line.setAttribute("x1", rect.x.baseVal.value);
  line.setAttribute("y1", rect.y.baseVal.value);
  line.setAttribute("x2", rect2.x.baseVal.value);
  line.setAttribute("y2", rect2.y.baseVal.value);
  line.setAttribute("stroke", "darkgray");
  svg.appendChild(line);
  const lineAnimateX1 = document.createElementNS(SVGNS, "animate");
  lineAnimateX1.setAttribute("attributeName", "x1");
  lineAnimateX1.setAttribute("values", `${rect.x.baseVal.value};200`);
  lineAnimateX1.setAttribute("dur", "5s");
  line.append(lineAnimateX1);
  const lineAnimateY2 = document.createElementNS(SVGNS, "animate");
  lineAnimateY2.setAttribute("attributeName", "y2");
  lineAnimateY2.setAttribute("values", `${rect2.y.baseVal.value};300`);
  lineAnimateY2.setAttribute("dur", "5s");
  line.append(lineAnimateY2);
}
drawing();

<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 700 360" id="theSVG">
</svg>

轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/312332.html

標籤：javascript svg

上一篇：具有SVG背景的CSS網格

下一篇：如何在svg路徑中??添加文本？