2

HTML に埋め込まれた svg 画像で JavaScript を使用して svg 要素を作成する際に問題が発生しています。まったく同じはずの 2 つのファイルを作成しましたが、そのうちの 1 つは js で作成されています。

SVG.html

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8" />
  <title>Pozadí</title>
 </head>
 <body>
  <svg
    id="pozadi"
    xmlns="http://www.w3.org/2000/svg"
    version="1.1"
    height="200"
    width="200"
   >
   <path
     d="M 0,0 L 150,150 L 100,150 L 150,150 L 150,100"
     style="stroke: #000; stroke-width: 2px; stroke-linecap: round; fill: none;"
    >
    <animate
      from="M 0,0 L 150,0 L 115,35 L 150,0 L 115,-35"
      to="M 0,0 L 150,150 L 100,150 L 150,150 L 150,100"
      dur="10s"
      begin="5s"
      attributeType="XML"
      attributeName="d"
     >
    </animate>
   </path>
  </svg>
 </body>
</html>


JS.html

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8" />
  <title>Pozadí</title>
 </head>
 <body>
  <svg
    id="pozadi"
    xmlns="http://www.w3.org/2000/svg"
    version="1.1"
    height="200"
    width="200"
   >
  </svg>
  <script>
   var svg  = document.getElementById('pozadi');
   var path = document.createElementNS('http://www.w3.org/2000/svg/','path'); //I have tried createElement(string) too
   path.setAttribute('style',"stroke: #000; stroke-width: 2px; stroke-linecap: round; fill: none;");
   path.setAttribute('d',"M 0,0 L 150,150 L 100,150 L 150,150 L 150,100");
   var anim = document.createElementNS('http://www.w3.org/2000/svg/','animate');
   anim.setAttribute('from','M 0,0 L 150,0 L 115,35 L 150,0 L 115,-35');
   anim.setAttribute('to','M 0,0 L 150,150 L 100,150 L 150,150 L 150,100');
   anim.setAttribute('dur','10s');
   anim.setAttribute('begin','5s');
   anim.setAttribute('attributeType','XML');
   anim.setAttribute('attributeName','d');
   path.appendChild(anim);
   svg .appendChild(path);
  </script>
 </body>
</html>

2 番目のファイル JS.html は、白くてプレーンなファイルです。
私は尋ねています、それを修正する方法は？ありがとう、m93a

4

2 に答える 2

0 
var path = document.createElementNS('http://www.w3.org/2000/svg/','path');

間違っている。あなたがしたい

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

末尾に / 文字がないことに注意してください。同じ問題

var anim = document.createElementNS('http://www.w3.org/2000/svg/','animate');

これらの 2 行を修正すると、矢印が表示されるはずです (私は Firefox で修正しました) 。

于 2013-04-09T13:58:25.613 に答える