Как динамически создавать текстовые элементы SVG с использованием JS - PullRequest
Новая
       0

Как динамически создавать текстовые элементы SVG с использованием JS

0 голосов
/ 07 января 2019

Итак, у меня есть элемент SVG, который является текстом. Я хотел бы динамически создавать больше текстовых элементов SVG одного и того же вида, используя JavaScript. (желательно используя цикл 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;
	}
}
<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<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>
			<stop offset="100%" style="stop-color:rgb(0, 128, 0);stop-opacity:1"></stop>
		</lineargradient>
		<lineargradient id="gradYellow" x1="0%" x2="100%" y1="0%" y2="0%">
			<stop offset="0%" style="stop-color:rgb(255, 140, 0);stop-opacity:1"></stop>
			<stop offset="100%" style="stop-color:rgb(218, 165, 32);stop-opacity:1"></stop>
		</lineargradient>
		<lineargradient id="gradRed" x1="0%" x2="100%" y1="0%" y2="0%">
			<stop offset="0%" style="stop-color:rgb(255, 0, 0);stop-opacity:1"></stop>
			<stop offset="100%" style="stop-color:rgb(178, 34, 34);stop-opacity:1"></stop>
		</lineargradient>
	</defs>
	<g class="circle_seat" id="circle_seats">
		<circle cx="70" cy="200" fill="url(#gradGreen)" id="test1" id="seat1" r="40" stroke="black" stroke-width="1"></circle>
	</g>
	<g class="seat_name" id="seat_name1">
		<text fill="#black" font-family="Verdana" font-size="20" id="seat1_details" ondblclick="change_name(event)" x="250" y="210">
			BLANK
		</text>
	</g>

  
  </svg>
</body>
</html>

Ответы [ 2 ]

0 голосов
/ 08 января 2019

Так я создаю текст динамически. Вам нужно определить объект с текстовыми свойствами и текстовым содержимым. 

const SVG_NS = "http://www.w3.org/2000/svg";
// an object to define the properties and text content of the text element 
let o = {
  props: {
    x: 50,
    y: 15,
    "dominant-baseline": "middle",
    "text-anchor": "middle"
  },
  txtConent: "test text"
};

// a function to create a text element 
function drawText(o, parent) {
  // create a new text element
  let text = document.createElementNS(SVG_NS, "text");
  //set the attributes for the text
  for (var name in o.props) {
    if (o.props.hasOwnProperty(name)) {
      text.setAttributeNS(null, name, o.props[name]);
    }
  }
  // set the text content
  text.textContent = o.txtConent;
  // append the text to an svg element of your choice
  parent.appendChild(text);
  return text;
}

drawText(o, theSvg);
svg{border:1px solid}
<svg id="theSvg" viewBox="0 0 100 30"></svg>

Если вам также нужен способ динамического изменения текстового содержимого, я бы это сделал: 

const SVG_NS = "http://www.w3.org/2000/svg";
// an object to define the initial properties and text content of the text element 
let o = {
  props: {
    x: 50,
    y: 15,
    "dominant-baseline": "middle",
    "text-anchor": "middle"
  },
  txtConent: "your name"
};

// a function to create a text element 
function drawText(o, parent) {
  var text = document.createElementNS(SVG_NS, "text");
  for (var name in o.props) {
    if (o.props.hasOwnProperty(name)) {
      text.setAttributeNS(null, name, o.props[name]);
    }
  }
  text.textContent = o.txtConent;
  parent.appendChild(text);
  return text;
}

// a function to update the text
function updateText(text,txtConent){
  text.textContent = txtConent;
}


//you save the text in a variable
let txt = drawText(o, theSvg);
// you update the text content when the user is changing the value of the input
theName.addEventListener("input", ()=>{updateText(txt,theName.value)})
svg{border:1px solid}
<p>The name: <input type="text" id="theName" /></p>
<svg id="theSvg" viewBox="0 0 100 30"></svg>

Надеюсь, это поможет.

0 голосов
/ 08 января 2019 

var shape = document.createElementNS("http://www.w3.org/2000/svg", "circle");   
shape.setAttribute("cx", 25);
shape.setAttribute("cy", 25);
shape.setAttribute("r",  20);
shape.setAttribute("fill", "url(#gradGreen)");
shape.setAttribute("stroke","black");
shape.setAttribute("class","circle_seat");
document.getElementById("circle_seats").appendChild(shape);
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...