Question

我想从本地文本文件中动态替换svg对象的文本元素。在我的文件下面是文本和svg：

文本文件：

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

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

它与div工作正常，或者我将值（例如dog）用于要修改的元素svg。在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>

但是，当我将变量y放入文本元素svg时，我得到了消息＆＃34; [object Object]＆＃34;而不是消息＆＃34;它工作正常＆＃34;。在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>

你能帮助我吗？

谢谢，

B.R，

Answer 1

subprojects {
    repositories {
        // Add repositories here
    }
}

这适用于jquery

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

注意：我没有使用文件，我只是动态更新了svg

Answer 2

我解决了部分问题。我已经将“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>

fichier text：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 text：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

屏幕显示确定：

enter image description here

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

屏幕不行：

enter image description here

一个想法。你能救我吗？

B.R，

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

2 个答案: