Question

只是想问一下是否有任何方法可以在加载时更改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>

任何帮助都将不胜感激。

Answer 1

所以这并没有显示为未答复：

问题是页面上有两个ID为mySVGText的元素。 document.getElementById假设页面上的每个ID都是唯一的，因此当它们不是时就会出现意外行为。

SVG！在加载时更改文本

1 个答案: