JavaScriptでSVG画像要素をプログラムで作成する

私のタイトルと同じように、私はJavaScriptを使ってHTMLページにSVG画像要素をプログラムで作成しようとしています。何らかの理由で私の基本的なjavascriptコードは動作しませんが、私がraphaeljsライブラリを使用するとうまく動作します。だから明らかに私のjsに問題があります - 私はちょうどそれが何であるか把握していないようです。JavaScriptでSVG画像要素をプログラムで作成する

（注：ターゲットブラウザはFF4 +である）

ここでは、私がトップを達成しようとしているもののHTMLバージョンと基本的なページです：

<html> 
    <head> 
     <script type="text/javascript" src="http://raphaeljs.com/raphael.js"></script> 
    </head> 
    <body> 

     <svg 
     xmlns="http://www.w3.org/2000/svg" 
     xmlns:xlink="http://www.w3.org/1999/xlink" 
     id="test1" 
     height="200px" 
     width="200px"> 
      <image 
      id="testimg1" 
      xlink:href="http://i.imgur.com/LQIsf.jpg" 
      width="100" 
      height="100" 
      x="0" 
      y="0"/> 
     </svg> 

     <hr /> 

     <p id="testP1"> 


     </p> 
     <hr />  
     <p id="testP2"> 


     </p>   
    </body> 
</html>

そして、ここに私のですジャバスクリプト：

var paper = Raphael(document.getElementById("testP1"), 200, 200); 
paper.image("http://i.imgur.com/LQIsf.jpg", 0,0, 100, 100); 



var svg = document.createElementNS('http://www.w3.org/2000/svg','svg'); 
svg.setAttributeNS('http://www.w3.org/2000/svg','xlink','http://www.w3.org/1999/xlink'); 
svg.setAttributeNS('http://www.w3.org/2000/svg','height','200'); 
svg.setAttributeNS('http://www.w3.org/2000/svg','width','200'); 
svg.setAttributeNS('http://www.w3.org/2000/svg','id','test2'); 

var svgimg = document.createElementNS('http://www.w3.org/2000/svg','image'); 
svgimg.setAttributeNS('http://www.w3.org/2000/svg','height','100'); 
svgimg.setAttributeNS('http://www.w3.org/2000/svg','width','100'); 
svgimg.setAttributeNS('http://www.w3.org/2000/svg','id','testimg2'); 
svgimg.setAttributeNS('http://www.w3.org/1999/xlink','href','http://i.imgur.com/LQIsf.jpg'); 
svgimg.setAttributeNS('http://www.w3.org/2000/svg','x','0'); 
svgimg.setAttributeNS('http://www.w3.org/2000/svg','y','0'); 

svg.appendChild(svgimg); 

document.querySelector('#testP2').appendChild(svg);

ライブ例：http://jsfiddle.net/Yansky/UVFBj/5/

出典

2011-07-15 Yansky

SVGネイティブ属性（xlink:hrefを除く）はSVG名前空間を共有しません。あなただけsetAttribute代わりsetAttributeNSの使用、または例えば

svgimg.setAttributeNS(null,'x','0');

を使用することができます。

ここでは、働いて、次のとおりです。SVGは、すべての主要なブラウザでは、その中でうまく動作するように私は、適切にXHTMLを使用するようにフィドルを変更http://jsfiddle.net/UVFBj/8/

注意。

出典

2011-07-15 01:54:44 Phrogz

ああ、そうです。それをクリアしていただきありがとうございます。 :) – Yansky

ああ私の神、ありがとう。あなたは王様です！ –

あなたは私の一日を救った。あなたは紳士であり学者である、と思う。 –

詳細については、

私はSVG要素を作成するためにbellow関数を使用していましたが、xlink：hrefのために画像を作成すると失敗していました。

コード怒鳴るが（その場で任意のSVG要素を作成する）

function makeSVG(parent, tag, attrs) { 
      var el= document.createElementNS('http://www.w3.org/2000/svg', tag); 
      for (var k in attrs){ 
       if(k=="xlink:href"){ 
        el.setAttributeNS('http://www.w3.org/1999/xlink', 'href', attrs[k]); 
       }else{ 
        el.setAttribute(k, attrs[k]); 
       } 
      } 
     }

使用例があることを行うように修正されています

makeSVG('#map-tiles', 'image', { class:'map-tile', 'xlink:href':'map/xxx.jpg', width:'512px', height: '512px' x:'0', y:'0'});

親がSVGグループの「層」を整理するために使用されますタグ。

出典

2014-04-17 20:03:48

私はあなたがそれを作成した後に新しい要素を挿入する必要がありますと思う。それはあなたが "親"パラメータを持っているものです。 – dkellner

ありがとうございます。私は解決策を探して約8時間後にそれを見つけました。 – VirtuosiMedia

JavaScriptでSVG画像要素をプログラムで作成する

答えて

関連する問題