javascript - 如何获取变量？

Question

我想在这个结论中插入一个变量 ttl:'rotate('".c1", 150, 100, "blue", 60, "30 628", -90);"而不是数字 628

将变量插入到生成中后，代码停止工作

我就是这样插入的。

1) rotate(".c1", 150, 150, 100, "blue", 60, "30 ttl", -90);
2) rotate(".c1", 150, 150, 100, "blue", 60, "30 `${ttl}`", -90);
3) rotate(".c1", 150, 150, 100, "blue", 60,  `30  ${ttl}`, -90);

之后，代码就不起作用了

在代码运行后，应该会得到一个片段，我将展示如何将其转换为 svg

<svg xmlns="http://www.w3.org/2000/svg"
     width="300" 
     height="300" 
     viewBox="0 0 300 300" >
  <circle 
          fill="none" 
          stroke="red" 
          stroke-width="30" 
          cx="150" 
          cy="150" 
          r="100"
          stroke-dasharray="30 628"/>
</svg>

这就是我期望得到的结果。

如何解决将变量放入函数中的情况？

let obj = document.querySelector("circle");
let ttl = Math.round(obj.getTotalLength());

function rotate(obj, cx, cy, r, stroke, w, da, rad) {
  let item = document.querySelector(obj);

  this.cx = item.setAttribute("cx", cx);
  this.cy = item.setAttribute("cy", cy);
  this.r = item.setAttribute("r", r);
  this.stroke = item.setAttribute("stroke", stroke);
  this.w = item.setAttribute("stroke-width", w);
  this.da = item.setAttribute("stroke-dasharray", da);
  this.rad = item.style.transform = `rotate(${rad}deg)`;
}

rotate(".c1", 150, 150, 100, "blue", 60, "30 628", -90);

svg {
  border: 1px solid red;
}

circle {
  tranform-box: fill-box;
  transform-origin: center;
  fill: none;
}

<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300" viewBox="0 0 300 300">
  <circle class="c1" />
</svg>

如何在完成的函数中插入变量，如何替换变量ttl上的628？

Answer 1

您的第三个版本(使用 template literal )应该可以工作。如果没有，您应该检查您使用的浏览器是否支持它们(任何版本的 Internet Explorer 均不支持)，或者 ttl 的计算是否产生了您期望的结果。如果您的浏览器不支持模板文字，您可以使用

'30  ' + ttl

在它的位置。

let ttl = 628;
console.log(`30  ${ttl}`);
console.log('30  ' + ttl);

您的代码在 Firefox 74.0 中运行良好:

let obj = document.querySelector("circle");
let ttl = Math.round(obj.getTotalLength());

function rotate(obj, cx, cy, r, stroke, w, da, rad) {
  let item = document.querySelector(obj);

  this.cx = item.setAttribute("cx", cx);
  this.cy = item.setAttribute("cy", cy);
  this.r = item.setAttribute("r", r);
  this.stroke = item.setAttribute("stroke", stroke);
  this.w = item.setAttribute("stroke-width", w);
  this.da = item.setAttribute("stroke-dasharray", da);
  this.rad = item.style.transform = `rotate(${rad}deg)`;
}

rotate(".c1", 150, 150, 100, "blue", 60, `30 $ttl`, -90);

svg {
  border: 1px solid red;
}

circle {
  tranform-box: fill-box;
  transform-origin: center;
  fill: none;
}

<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300" viewBox="0 0 300 300" >
  <circle class="c1" />
</svg>


<svg xmlns="http://www.w3.org/2000/svg"
     width="300" 
     height="300" 
     viewBox="0 0 300 300" >
  <circle 
          fill="none" 
          stroke="red" 
          stroke-width="30" 
          cx="150" 
          cy="150" 
          r="100"
          stroke-dasharray="30 628"/>
</svg>

或者这应该适用于 IE 或早期版本的 Firefox 等。

let obj = document.querySelector("circle");
let ttl = Math.round(obj.getTotalLength());

function rotate(obj, cx, cy, r, stroke, w, da, rad) {
  let item = document.querySelector(obj);

  this.cx = item.setAttribute("cx", cx);
  this.cy = item.setAttribute("cy", cy);
  this.r = item.setAttribute("r", r);
  this.stroke = item.setAttribute("stroke", stroke);
  this.w = item.setAttribute("stroke-width", w);
  this.da = item.setAttribute("stroke-dasharray", da);
  this.rad = item.style.transform = `rotate(${rad}deg)`;
}

rotate(".c1", 150, 150, 100, "blue", 60, '30 ' + ttl, -90);

svg {
  border: 1px solid red;
}

circle {
  tranform-box: fill-box;
  transform-origin: center;
  fill: none;
}

<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300" viewBox="0 0 300 300" >
  <circle class="c1" />
</svg>


<svg xmlns="http://www.w3.org/2000/svg"
     width="300" 
     height="300" 
     viewBox="0 0 300 300" >
  <circle 
          fill="none" 
          stroke="red" 
          stroke-width="30" 
          cx="150" 
          cy="150" 
          r="100"
          stroke-dasharray="30 628"/>
</svg>