4

更新：

所以让我使用实际的代码......我有这个javascript......

window.writeText = function(form) {
  var text;
  form.catnumber2.value = "PING";
  text = document.getElementByName('cat2Number').innerHtml;
  return alert(text);
};

但我没有收到预期的警报框。

当我通过视图/开发人员/视图源（我在 chrome 中）查看源时，svg 没有显示，但是当我使用视图/开发人员/开发人员工具时....我可以看到以下 svg....

<svg height="594">
    <g ID="MasterG">
        <text name="cat2Number">"$1234"</text>
    </g>
</svg>

知道我做错了什么吗？为什么我在“查看源代码”中看不到 svg 代码，但在“开发者工具”中可以看到？这是我问题的原因吗？这就是我的警报框不会“警报”的原因吗？

4

3 回答 3

5

经过几秒钟的谷歌搜索并找到这个https://stackoverflow.com/a/9602772/1217408

我创建了这个使用的 JSFiddle 示例：http textContent: //jsfiddle.net/hVyTJ/1/

原始的http://jsfiddle.net/hVyTJ/使用标准 DOM 遍历从根 SVG 元素获取文本元素。而更新直接通过 ID 定位文本元素。

至于查找属性值，您可以getAttributeNS按照此处所述使用：http: //www.carto.net/svg/manipulating_svg_with_dom_ecmascript/

编辑：

正如 Phrogz 所指出的，一个简单的getAttribute调用通常就足够了。阅读评论了解更多详情。

于 2012-07-30T20:12:02.617 回答
1

您可以调用text()以返回svg:text元素的文本内容。

// assume svgCont is an svg element
var label = svgCont.append("svg:text").text("hello, world!");

// print the text content to the console
console.log( label.text() );
于 2013-04-20T00:35:40.250 回答
0

只使用 dom 方法

const svg = document.querySelector(`[data-uuid="live_map_svg"]`);

const shape = svg.querySelector(`text`);

const text = shape.innerHTML;
// const text = shape.textContent;

setTimeout(() => {
  svg.insertAdjacentHTML(`beforebegin`, text);
}, 1000);
.svg-box{
 width: 500px;
 height: 500px;
 background: #ccc;
 color: red;
 font-size: 16px;
}

[data-uuid="live_map_svg"]{
  font-size: 16px;
}
<div class="svg-box">
  <svg
    data-uuid="live_map_svg" id="live_map_svg"
    width="100%" height="100%"
    viewBox="0 0 100 100"
    version="1.1"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">
    <text x="30" y="50" fill="#369acd">A Area</text>
  </svg>
</div>

于 2020-02-27T11:55:56.203 回答