imgタグの中からSVGテキストを変更する

imgタグ内のsvgアイテムのテキストをjqueryで動的に変更しようとしています。すべてのボードがtextContentを変更すると言っているので、間違ったノードをつかんでいますが、テキストを変更することはありません。は、ここに私のHTMLです：imgタグの中からSVGテキストを変更する

<head> 
<script type="text/javascript"> 
      $(window).resize(function() { 
       $('.ball').height($(window).height()+"px"); 
       $('.ball').width($(window).width()/6+"px"); 
      }); 
      $(function() { 
       $(".ball").each(function(index) { 
        var textNode = $(this); 
        textNode = textNode.find(".changeText"); 
        textNode = textNode.children().first(); 
        console.log(textNode); 
        textNode.textContent = "5"; 
       }); 
      }); 
      $(window).trigger('resize'); 
     </script> 
    </head> 
    <body> 
     <div id="svgMain"> 
      <img class="ball" src="ball.svg"/> 
      <img class="ball" src="ball.svg"/> 
      <img class="ball" src="ball.svg"/> 
      <img class="ball" src="ball.svg"/> 
      <img class="ball" src="ball.svg"/> 
      <img class="ball" src="ball.svg"/> 
     </div> 
    </body>

そしてここで私は、動的にロードしようとしていますimgタグ内のSVGです：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> 
    <g> 
     <circle cx="50%" cy="50%" r="50%"/> 
     <text class="changeText" text-anchor="middle" x="50%" y="60%" font-family="Verdana" font-size="35" fill="blue" ><tspan>150</tspan> </text> 
    </g> 
</svg>

出典

2016-11-08 tcoulson

あなたはDOMから<img>タグ内に何かをアクセスすることはできません。これはドキュメントの一部ではなく、ドキュメント内にアクセスすることもできません。あなたの問題のために

、どちらか（まあ、実際にそれをしない、難しい遅く、...） <object>またはそれにアクセスするための<embed>要素（plnkr）、
dataURIsを使用し、変更のいずれかを使用します。

出典

2016-11-08 04:56:47 Kaiido

それが問題を解決しました。あなたとc-笑顔に感謝します。 – tcoulson

あなたtextNodeはjQueryオブジェクトです。 first()の代わりに[0]にDOMオブジェクトを抽出します.DOMノードには.textContentがあり、jQueryオブジェクトには含まれていません。

代わりに、.textセッターをjQueryオブジェクトに使用してください。これらのアプローチの両方が機能します。

var textNode = $('svg'); 
 
textNode = textNode.find(".changeText"); 
 
textNode = textNode.children()[0]; 
 
textNode.textContent = "5"; 
 

 
var textNode = $('svg'); 
 
textNode = textNode.find(".changeText"); 
 
textNode = textNode.children(); 
 
textNode.text("7");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<svg height="100" width="100" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> 
 
    <g> 
 
    <circle cx="50%" cy="50%" r="50%" /> 
 
    <text class="changeText" text-anchor="middle" x="50%" y="60%" font-family="Verdana" font-size="35" fill="blue"> 
 
     <tspan>150</tspan> 
 
    </text> 
 
    </g> 
 
</svg>

出典

2016-11-08 04:10:48 Amadan

それはまだimgタグやforEachの内側にすることができますか？私はどうしていいのか分からないが、内部ではうまくいかないようだ。トラブルシューティングをする必要があります。私はそれを読み込むのが簡単なので、imgタグに保存したいと思います。テキストを連続した数字で、約100個を画面に表示したいと思います。 – tcoulson

読み込んだドキュメントにアクセスするには、画像の代わりに<object data="ball.svg">を使用する必要があります。そのコンテンツにアクセスするためのHTMLObjectElement.contentDocument参照。このような

何か：

  $("object.ball").each(function(index) { 
       var textNode = $(this.contentDocument); 
       textNode = textNode.find(".changeText"); 
       textNode = textNode.children().first(); 
       console.log(textNode); 
       textNode.textContent = "5"; 
      });

出典

2016-11-08 04:57:38

ああ、ありがとう、私はそれを試みます。 – tcoulson

imgタグの中からSVGテキストを変更する

答えて

関連する問題