svg ! !在加载时更改文本

svg!! change text on load

本文关键字：文本 加载 svg      更新时间：2023-09-26

只是想问有没有办法改变svg文本加载。标准的SVG示例可以正常工作。

$(document).ready(function(){
    document.getElementById('mySVGText').textContent = 'new_value';
});

它适用于这个svg

<svg version="1.1"  
baseProfile="full"  
xmlns="http://www.w3.org/2000/svg" id="mySVG">  
<rect width="100%" height="100%" fill="red" />  
<circle cx="150" cy="100" r="80" fill="green" />  
<text id="mySVGText" name="textName" x="150" y="125" font-size="60" text-anchor="middle" fill="white">SVG</text>
</svg>

，但似乎这个svg不允许我getElementById和改变文本:

<svg version="1.1" 
id="Capa_1" 
xmlns="http://www.w3.org/2000/svg"
x="0px" y="0px"
 viewBox="0 0 489 489" 
 style="enable-background:new 0 0 489 489;" 
 xml:space="preserve"
 >
<text id="mySVGText" name="textName" x="160" y="400" font-size="280" text-anchor="middle" fill="blue">SVG</text>
<g>
<path style="fill:white" d="M440.1,422.7l-28-315.3c-0.6-7-6.5-12.3-13.4-12.3h-57.6C340.3,42.5,297.3,0,244.5,0s-95.8,42.5-96.6,95.1H90.3
    c-7,0-12.8,5.3-13.4,12.3l-28,315.3c0,0.4-0.1,0.8-0.1,1.2c0,35.9,32.9,65.1,73.4,65.1h244.6c40.5,0,73.4-29.2,73.4-65.1
    C440.2,423.5,440.2,423.1,440.1,422.7z M244.5,27c37.9,0,68.8,30.4,69.6,68.1H174.9C175.7,57.4,206.6,27,244.5,27z M366.8,462
    H122.2c-25.4,0-46-16.8-46.4-37.5l26.8-302.3h45.2v41c0,7.5,6,13.5,13.5,13.5s13.5-6,13.5-13.5v-41h139.3v41
    c0,7.5,6,13.5,13.5,13.5s13.5-6,13.5-13.5v-41h45.2l26.9,302.3C412.8,445.2,392.1,462,366.8,462z"/>
</g>
</svg>

这样就不会显示为未回答:

问题是页面上有两个id为mySVGText的元素。document.getElementById假设页面上的每个id都是唯一的，所以当它们不是唯一的时候，它可能会有意外的行为。

相关文章：