JS로 HTML에서 SVG 조작

html로 포함 된 svg 이미지에서 javascript를 사용하여 svg 요소를 생성하는 데 문제가 있습니다. 정확하게 동일해야하지만 두 파일 중 하나는 js로 생성됩니다. JS로 HTML에서 SVG 조작

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>

두 번째 파일, JS.html, 그냥 흰색과 일반이다.
나는 그것을 고치는 법을 묻고있다. 고마워, m93a

출처

2013-04-09 m93a

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');

와 같은 문제는 여기에 jsfiddle to prove it입니다.

출처

2013-04-09 13:58:25

파이어 폭스에 있지 않습니다. ( – m93a

오, 그래! 이제 작동 해! 고마워. D – m93a

문제 중 하나는 모든 요소가로드 될 때까지 기다리는 대신 페이지를로드하자마자 스크립트를 실행하는 것입니다.

기본적으로 document.getElementById ('pozadi'); 실행하면 null이 될 수 있으며 외부 요청 (http://www.w3.org/2000/svg)이 발생하기 때문에 발생 가능성이 큽니다.

현재 스크립트로 함수를 호출하는 onload 수신기를 추가해보십시오. jQuery를 가지고 있다면 이것은 http://api.jquery.com/ready/을 찾고있는 것입니다. 그렇지 않다면 ... 수동으로하십시오.

출처

2013-04-09 13:52:32 zozo

document.getElementById ('pozadi')는 레이아웃에 의존하지 않으므로 언제든지 실행할 수 있습니다. 여기에서는 onload를 사용할 필요가 없습니다. –

Omg ... 언제부터? 스크립트를 맨 위에 놓고 차이점을 확인하십시오. – zozo

svg가 script 요소의 "위"에 있으면 svg의 dom을 사용할 준비가되어 있어야합니다. 그것이 아래에 있다면, 아무것도 기다리지 않고 끝낼 수 있습니다. – m93a

JS로 HTML에서 SVG 조작

답변

관련 문제