Javascript 动态替换svg对象的文本元素_Javascript_Jquery

Javascript 动态替换svg对象的文本元素

javascript jquery

Javascript 动态替换svg对象的文本元素,javascript,jquery,Javascript,Jquery,我想从本地文本文件中动态替换svg对象的文本元素。下面是我的文件文本et 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" wid

我想从本地文本文件中动态替换svg对象的文本元素。下面是我的文件文本et 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>

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

它可以很好地与div一起使用，或者如果我为元素svg添加了要修改的值（例如dog）。下面是mon 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>


$（文档）.ready（函数（）{
var x=$（“#divA”）.load（“demo#u test.txt#p1”）；
变量y=$（“#div1”）.load（“demo#u test.txt#p1”）；
document.getElementById（“div1”）.textContent=y；
var svg=document.getElementById（“textsvg”）；
var svgDoc=svg.contentDocument；
svgDoc.getElementById（“divA”）.textContent=“dog”；
});               
PSU0至PDU-A G0-2

然而，当我为文本元素svg输入变量y时，我得到的是消息“[object object]”，而不是消息“It works fine”。在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>


$（文档）.ready（函数（）{
var x=$（“#divA”）.load（“demo#u test.txt#p1”）；
变量y=$（“#div1”）.load（“demo#u test.txt#p1”）；
document.getElementById（“div1”）.textContent=y；
var svg=document.getElementById（“textsvg”）；
var svgDoc=svg.contentDocument；
svgDoc.getElementById（“divA”）.textContent=x；
});               
PSU0至PDU-A G0-2

你能帮我吗

谢谢

B.R，


$（文档）.ready（函数（）{
$（“#divA”）.html（“Gorillaz Inc”）；
});

这适用于jquery

完整示例：

注意：我没有使用文件，只是动态更新了svg $（文档）.ready（函数（）{ $（“#divA”）.html（“Gorillaz Inc”）； }); 这适用于jquery

完整示例：

注意：我没有使用文件，只是动态更新了svg，解决了部分问题。我已经将“svg”直接嵌入到我的html中。我注意到，通过下载不带标签的文本文件：demo_text1.txt，div显示良好，文本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>

屏幕显示正常：

但是，通过将文本svg指向带有标记（demo_test.txt）的文本文件，它不起作用：

屏幕不正常：

我解决了部分问题。我已将“svg”直接嵌入到html中。我注意到，通过下载不带标签的文本文件：demo_text1.txt，div显示良好，文本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>

屏幕显示正常：

但是，通过将文本svg指向带有标记（demo_test.txt）的文本文件，它不起作用：

屏幕不正常：

谢谢您的帮助，但是我的html在本地文件文本中可以很好地工作，带有div和一个字符串供元素svg修改，但在本地文本文件中不使用元素svg进行修改。谢谢您的帮助，但是我的html在本地文件文本中可以很好地工作，带有div和一个字符串供元素svg修改，但在el中不工作要从本地文本文件修改的svg

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