javascript - 如何获取和设置 SVG 中 <text> 元素的值？

Question

我正在尝试读取和更新 SVG 文本元素的值。

当用户按下 (+) 或 (-) 时，两个符号之间的值应该递增或递减，并在页面上更新。为此，我需要能够读取“文本”元素的当前值并更新它。

这是 JSFiddle http://jsfiddle.net/hVyTJ/150/和代码:

<div>
   <table>
     <tr>
       <td>
            <svg width="320" height="65">
                <text x="213" y="48" style="fill:black;font-size:24;" >+</text>
                <text x="284" y="39" style="fill:black;font-size:24;">_</text>

                <circle cx="220" cy="40" r="15" stroke="black" stroke-width="0.5" fill="none" />
                <circle cx="290" cy="40" r="15" stroke="black" stroke-width="0.5" fill="none" />

                <rect onclick="AddQuantity(event, this);" x="200" y="20" width="40" height="40" style="fill-opacity:0.1" />
                <rect onclick="AddQuantity(event, this);" x="270" y="20" width="40" height="40" style="fill-opacity:0.1" />
                <text x="247" y="45" style="fill:black;font-size:12;">800</text>

            </svg>
       </td>
     </tr>
     <tr>
       <td>
            <svg width="320" height="65">
                <text x="213" y="48" style="fill:black;font-size:24;" >+</text>
                <text x="284" y="39" style="fill:black;font-size:24;">_</text>

                <circle cx="220" cy="40" r="15" stroke="black" stroke-width="0.5" fill="none" />
                <circle cx="290" cy="40" r="15" stroke="black" stroke-width="0.5" fill="none" />

                <rect onclick="AddQuantity(event, this);" x="200" y="20" width="40" height="40" style="fill-opacity:0.1" />
                <rect onclick="AddQuantity(event, this);" x="270" y="20" width="40" height="40" style="fill-opacity:0.1" />
                <text x="247" y="45" style="fill:black;font-size:12;">900</text>

            </svg>
       </td>
     </tr>
   </table>
</div>

<script>


function AddQuantity(event,x) {
  event.stopPropagation();

  var y = x.parentNode.lastChild;
  alert(y);

  // Not Sure how to retrieve the value
  var z = x.parentNode.lastChild.nodeValue;
  alert(z);

  // Not Sure how to set the value
  x.parentNode.lastChild.nodeValue = 777;

}

</script>

Answer 1

也许是这样的。 textContent 获取/设置文本，前提是您选择了正确的元素。

<div>
   <table>
     <tr>
       <td>
            <svg width="320" height="65">
                <text x="213" y="48" style="fill:black;font-size:24;" >+</text>
                <text x="284" y="39" style="fill:black;font-size:24;">_</text>

                <circle cx="220" cy="40" r="15" stroke="black" stroke-width="0.5" fill="none" />
                <circle cx="290" cy="40" r="15" stroke="black" stroke-width="0.5" fill="none" />

                <rect onclick="AddQuantity(evt, 1);" x="200" y="20" width="40" height="40" style="fill-opacity:0.1" />
                <rect onclick="AddQuantity(evt, -1);" x="270" y="20" width="40" height="40" style="fill-opacity:0.1" />
                <text x="247" y="45" style="fill:black;font-size:12;">800</text>

            </svg>
       </td>
     </tr>
     <tr>
       <td>
            <svg width="320" height="65">
                <text x="213" y="48" style="fill:black;font-size:24;" >+</text>
                <text x="284" y="39" style="fill:black;font-size:24;">_</text>

                <circle cx="220" cy="40" r="15" stroke="black" stroke-width="0.5" fill="none" />
                <circle cx="290" cy="40" r="15" stroke="black" stroke-width="0.5" fill="none" />

                <rect onclick="AddQuantity(evt, 1);" x="200" y="20" width="40" height="40" style="fill-opacity:0.1" />
                <rect onclick="AddQuantity(evt, -1);" x="270" y="20" width="40" height="40" style="fill-opacity:0.1" />
                <text x="247" y="45" style="fill:black;font-size:12;">900</text>

            </svg>
       </td>
     </tr>
   </table>
</div>

<script>


function AddQuantity(evt, amount) {
  evt.stopPropagation();

  var y = evt.target;

  // retrieve the value
  var z = y.parentNode.lastElementChild.textContent;   
  // set the value
  y.parentNode.lastElementChild.textContent = parseInt(z) + amount;

}

</script>