Question

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

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

这是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获取/设置文本，为您选择正确的元素。

＆＃13;

<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>

＆＃13;

Answer 2

使用jquery，您可以这样做：

//Get the value of an element
var someElement = $(".some-selector").val();

//Set the value of an element
var someElement.val("aValueToSet");

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

2 个答案: