Как получить доступ к внутреннему html элемента svg в javacscript и изменить его? - PullRequest
Новая
       1

Как получить доступ к внутреннему html элемента svg в javacscript и изменить его?

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

Моя цель - получить доступ к тексту, отображаемому в элементе svg (внутреннем html текстового атрибута svg), а затем заменить его на то, что пользователь вводит через приглашение. Вот мой код 

function display_name_submission_form(event) {
	var name = prompt("please enter the name for this seat");
	if (name != null) {
		event.target.setAttribute('fill', 'url(#gradRed)');
		document.getElementById('seat1_details').textContent = document.getElementById('txt1').value;
	}
}

	          
<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<svg height="1000" width="1000">
	<g>
		<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>
		<circle cx="70" cy="200" fill="url(#gradGreen)" id="seat1" onclick="display_name_submission_form(event)" r="40" stroke="black" stroke-width="1"></circle>
		<text fill="#black" font-family="Verdana" font-size="30" id="seat1_details" x="38" y="210">
			SVG
		</text>
	</g></svg>
</body>
</html>

1 Ответ

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

Используйте прослушиватель событий в документе и проверьте, что было нажато, кнопка или текст или что-то еще 

document.addEventListener("click", function(e) {
  var id = e.target.id;
  if (id != "seat1" && id != "seat1_details") return;
  var name = prompt("please enter the name for this seat");
  if (name != null) {
    document.getElementById("seat1").setAttribute('fill', 'url(#gradRed)');
    document.getElementById('seat1_details').textContent = name;
  }
});
<svg height="1000" width="1000">
  <g>
    <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>
    <circle cx="70" cy="200" fill="url(#gradGreen)" id="seat1"  r="40" stroke="black" stroke-width="1"></circle>
    <text fill="#black" font-family="Verdana" font-size="30" id="seat1_details" x="38" y="210">SVG</text>
  </g>
</svg>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...