小编Fir*_*ast的帖子

如何使用 JS 动态创建 SVG 文本元素

所以，我有一个 SVG 元素，它是文本。我想使用 javascript 动态创建更多完全相同类型的 SVG 文本元素。（最好使用某种 for 循环）。一种选择是对值进行硬编码，但我宁愿不这样做。这是我的代码：

var overlapThreshold = "50%";
var name_count = 0;
Draggable.create(".seat_name", {
  bounds: "svg",
  onDrag: function(e) {
    if (this.hitTest("#test1", overlapThreshold)) {
      document.getElementById("test1").setAttribute('fill', 'url(#gradRed)');
    } else {
      document.getElementById("test1").setAttribute('fill', 'url(#gradGreen)');
    }
  }
});

function change_name(event) {
  var name = prompt("Enter a New Name:");
  if (name != null && name != "") {
    event.target.textContent = name;
  }
}

Run Code Online (Sandbox Code Playgroud)

  <button id="test_button" onclick="create_name_tags()">Test</button> <svg height="1000" width="1000">
  <defs>
    <lineargradient id="gradGreen" x1="0%" x2="100%" y1="0%" y2="0%">
      <stop offset="0%" style="stop-color:rgb(152, 251, 152);stop-opacity:1"></stop> …

Run Code Online (Sandbox Code Playgroud)

html javascript svg namespaces createelement

Fir*_*ast

2022 08-22

5
推荐指数

1
解决办法

6673
查看次数