javascriptでSVGを作成しましたが、CSSに接続したり、ブラウザに表示したりすることはありません。すべてのソリューション？

私はSVG要素をjavascriptで作成しようとしていますが、スタイリングで作業することはできません。 SVGが作成され、すべてがブラウザインスペクタのHTMLに表示されます。クラス名はHTMLの開始タグに表示されます。ただし、CSSスタイリングは適用されません。javascriptでSVGを作成しましたが、CSSに接続したり、ブラウザに表示したりすることはありません。すべてのソリューション？

クロムにはHTMLで表示されますが、CSSインスペクタでは認識されません.FirefoxではCSSインスペクタで認識されますが、まだブラウザに表示されません。いずれのブラウザのウィンドウにも何も表示されません。私はクラスを適用する4つのメソッド試した

：

my_SVG.className = '私の-SVGを';

my_SVG.classList.add（ 'my-svg'）;

my_SVG.setAttribute（ 'class'、 'my-svg'）;

my_SVG.setAttributeNS（null、 'class'、 'my-svg'）;

どれも違いはありません。私はまた、手動でこのsvgを作成し、それはうまく動作しますが、私はjavascriptでそれを作成しようとすると、スタイルはありません。これの周りにはありますか？また、私は、createElementNS();のようなコマンドでjavascriptを使ってSVG要素を作成するためのドキュメントのほとんどがMDNにあることに気がついたので、Firefoxが少なくともCSSインスペクタにそれを置くのはなぜですか？もっと重要なことは、これがChromeで不可能になるということですか？

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <style type="text/css"> 
 
    .wrapper { 
 
     width: 100%; 
 
     height: auto; 
 
     margin: auto; 
 
     text-align: center; 
 
    } 
 
    .my-svg { 
 
     display: block; 
 
     margin: 0 auto; 
 
    } 
 
    svg path.checkMark { 
 
     fill: none; 
 
     stroke-width: 7; 
 
     stroke: rgba(102, 204, 102, 1); 
 
     opacity: 1; 
 
    } 
 
    </style> 
 
</head> 
 

 
<body> 
 
    <div class="wrapper"> 
 
    <!-- <svg class="my-svg" width="80px" height="80px" viewBox="0 0 90 90"> 
 
     <path class="checkMark" d="M25 37 L35 47 L55 32"></path> 
 
    </svg> --> 
 
    </div> 
 

 
    <script type="text/javascript"> 
 
    function createSVG() { 
 
     var contianer = document.querySelector('.wrapper'); 
 
     var xlmns = "http://www.w3.org/2000/xhtml"; 
 
     var my_SVG = document.createElementNS('xlmns', 'svg'); 
 
     my_SVG.setAttributeNS(null, "viewBox", "0 0 90 90"); 
 
     my_SVG.setAttributeNS(null, "height", "80px"); 
 
     my_SVG.setAttributeNS(null, "width", "80px"); 
 

 
     //my_SVG.className='my-svg'; 
 
     //my_SVG.classList.add('my-svg'); 
 
     //my_SVG.setAttribute('class','my-svg'); 
 
     my_SVG.setAttributeNS(null, 'class', 'my-svg'); 
 

 
     var checkMark = document.createElementNS('xlmns', 'path'); 
 

 
     //checkMark.className='checkMark'; 
 
     //checkMark.classList.add('checkMark'); 
 
     //checkMark.setAttribute('class','checkMark'); 
 
     checkMark.setAttributeNS(null, 'class', 'checkMark'); 
 
     checkMark.setAttributeNS(null, 'd', "M25 37 L35 47 L55 32"); 
 

 
     my_SVG.appendChild(checkMark); 
 
     contianer.appendChild(my_SVG); 
 
    } 
 

 
    createSVG(); 
 
    </script> 
 

 
</body> 
 

 
</html>

出典

2016-07-06 Mike

var xlmns = "http://www.w3.org/2000/xhtml"; 
var my_SVG = document.createElementNS('xlmns','svg'); 
             ^^^^^^^

これは間違っている：

は、ここに私のコードです。その関数の最初の引数は、使用している名前空間のURIでなければなりません。引用符があるので、それは文字列です。NOT前の行で作成した変数。その文字列は、現在のサイトの相対パスとして解釈されます。 http://example.com/path/to/htmlfile/xlmns、w3 DTDの代わりに。

だけでなく、メタレベルに、あなたはおそらくxlmがちょうど低音ackwardsである、（XMLN AME Sペース）xmlnsことを呼び出す必要があります。

出典

2016-07-06 14:32:22

1行目には、SVG要素を作成するSVGの名前空間を使用する必要があり、まだ間違っています。これがhtml名前空間です。 –

ありがとう私はそれらの修正を行ったが、私はまだCSSの問題があります。 'var xmlns =" http://www.w3.org/2000/xhtml "; var my_SVG = document.createElementNS（xmlns、 'svg'）; ' – Mike

以下のコードを変更する必要があります。

（すなわちそれは引用符で囲まないでください）変数を使用する必要があります
createElementNS()をXHTML、SVGの名前空間を使用していません。

変更

var xlmns = "http://www.w3.org/2000/svg"; 
var my_SVG = document.createElementNS(xlmns, 'svg');

へ

var xlmns = "http://www.w3.org/2000/svg"; 
var my_SVG = document.createElementNS(xlmns, 'svg');

実施例：

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <style type="text/css"> 
 
    .wrapper { 
 
     width: 100%; 
 
     height: auto; 
 
     margin: auto; 
 
     text-align: center; 
 
    } 
 
    .my-svg { 
 
     display: block; 
 
     margin: 0 auto; 
 
    } 
 
    svg path.checkMark { 
 
     fill: none; 
 
     stroke-width: 7; 
 
     stroke: rgba(102, 204, 102, 1); 
 
     opacity: 1; 
 
    } 
 
    </style> 
 
</head> 
 

 
<body> 
 
    <div class="wrapper"> 
 
    <!-- <svg class="my-svg" width="80px" height="80px" viewBox="0 0 90 90"> 
 
     <path class="checkMark" d="M25 37 L35 47 L55 32"></path> 
 
    </svg> --> 
 
    </div> 
 

 
    <script type="text/javascript"> 
 
    function createSVG() { 
 
     var contianer = document.querySelector('.wrapper'); 
 
     var xlmns = "http://www.w3.org/2000/svg"; 
 
     var my_SVG = document.createElementNS(xlmns, 'svg'); 
 
     my_SVG.setAttributeNS(null, "viewBox", "0 0 90 90"); 
 
     my_SVG.setAttributeNS(null, "height", "80px"); 
 
     my_SVG.setAttributeNS(null, "width", "80px"); 
 

 
     //my_SVG.className='my-svg'; 
 
     //my_SVG.classList.add('my-svg'); 
 
     //my_SVG.setAttribute('class','my-svg'); 
 
     my_SVG.setAttributeNS(null, 'class', 'my-svg'); 
 

 
     var checkMark = document.createElementNS(xlmns, 'path'); 
 

 
     //checkMark.className='checkMark'; 
 
     //checkMark.classList.add('checkMark'); 
 
     //checkMark.setAttribute('class','checkMark'); 
 
     checkMark.setAttributeNS(null, 'class', 'checkMark'); 
 
     checkMark.setAttributeNS(null, 'd', "M25 37 L35 47 L55 32"); 
 

 
     my_SVG.appendChild(checkMark); 
 
     contianer.appendChild(my_SVG); 
 
    } 
 

 
    createSVG(); 
 
    </script> 
 

 
</body> 
 

 
</html>

出典

2016-07-06 14:47:32 Pugazh

よろしくお願いします。どういうわけか私はそれを見ませんでした。 – Mike

@Mike：お手伝いします！ – Pugazh

javascriptでSVGを作成しましたが、CSSに接続したり、ブラウザに表示したりすることはありません。すべてのソリューション？

答えて

関連する問題