Question

我的目标是访问svg元素上显示的文本（svg text属性的内部html），然后将其替换为用户通过提示输入的内容。这是我的代码

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>

Answer 1

在文档上使用事件侦听器，并测试单击的内容，按钮或文本或其他内容

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>

如何在javacscript中访问svg元素的内部html并进行更改？

1 个答案: