動態替換svg對象的文本元素

我想從本地文本文件動態替換svg對象的文本元素。下面我的文件中的文本等SVG：動態替換svg對象的文本元素

文本文件：

<p id="p1">It works fine</p>

文本SVG：

<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg"> 
<rect id="svg_1" height="87" width="162" y="188" x="130" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="5" stroke="blue" fill="yellow"/> 
<text xml:space="preserve" text-anchor="start" font-family="serif" font-size="24" id="divA" y="240" x="313" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="0" stroke="#000000" fill="blue"> </text> 
</svg>

它正常工作與股利或如果我把值，例如狗，對於元素svg進行修改。下面週一fichier HTML：

<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
    <script> 
     $(document).ready(function(){ 
     var x = $("#divA").load("demo_test.txt #p1"); 
     var y = $("#div1").load("demo_test.txt #p1"); 
     document.getElementById("div1").textContent = y; 
     var svg = document.getElementById("textsvg"); 
     var svgDoc = svg.contentDocument; 
     svgDoc.getElementById("divA").textContent = "dog";     
     });    
    </script> 
</head> 
<body> 
     <div id="div1"><h2>PSU0 to PDU-A G0-2</h2></div> 
     <object id="textsvg" width="600" height="480" type="image/svg+xml" data="essai.svg"></object>  
</body>

然而，當我把變量y的文本元素SVG我有信息「的翻譯：」消息「它工作正常」，而不是。下面的HTML文件：

<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
    <script> 
     $(document).ready(function(){ 
     var x = $("#divA").load("demo_test.txt #p1"); 
     var y = $("#div1").load("demo_test.txt #p1"); 
     document.getElementById("div1").textContent = y; 
     var svg = document.getElementById("textsvg"); 
     var svgDoc = svg.contentDocument; 
     svgDoc.getElementById("divA").textContent = x;     
     });    
    </script> 
</head> 
<body> 
     <div id="div1"><h2>PSU0 to PDU-A G0-2</h2></div> 
     <object id="textsvg" width="600" height="480" type="image/svg+xml" data="essai.svg"></object>  
</body>

你能幫助我。

感謝，

BR，

來源

2017-01-18 toto titi

<script> 
    $(document).ready(function(){ 
     $("#divA").html("Gorillaz Inc"); 
    });    
</script>

這工作與jQuery

完整的示例：http://codepen.io/anon/pen/pRRgaP

注：我沒有使用的文件，我剛剛更新的動態SVG

來源

2017-01-18 15:24:01

感謝您的幫助，但我的HTML代碼與DIV本地文件文本和字符的字符串正常工作對SVG元素進行修改，但不與元素SVG工作從本地文本文件修改 –

我解決了我的問題的一部分。我直接將「svg」嵌入到我的html中。我注意到，通過下載的文本文件，而不標籤：demo_text1.txt股利出現以及和文本SVG：

<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
<script> 
    $(document).ready(function(){ 
    $("#div1").load("demo_test.txt #p2"); 
    $("#divA").load("demo_test1.txt"); 
     });    
    </script> 
</head> 
<body> 
    <div id="div1"><h2 style="color:blue">PSU0 to PDU-A G0-2</h2></div> 

    <svg width="800" height="480" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg"> 
    <rect id="svg_1" height="87" width="162" y="20" x="5" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="5" stroke="blue" fill="yellow"/> 
    <text xml:space="preserve" text-anchor="start" font-family="serif" font-size="14" id="divA" y="67" x="175" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="0" stroke="#000000" fill="blue"> </text> 
    </svg> 
</body> 
</html>

fichier文本：demo_test.txt

<p id="p1" >It works fine</p> 
<p id="p2" style="color:blue">I use the local text file "demo_test.txt".The "div" works fine with tags</p>

fichier文本：demo_text1。 TXT

I use the local text file "demo_test1.txt". 
The text of svg works fine without tag but doesn't work with tags

屏幕顯示OK：

enter image description here

然而，通過指向文本SVG與標籤（demo_test.txt文本文件，它不工作：

屏幕不正常：

enter image description here

的思考。你可以幫我嗎？

B.R，

來源

2017-01-20 14:09:39

動態替換svg對象的文本元素

回答

相關問題