반응형
HTML 내부에서 자바 스크립트를 사용하여 동적으로 SVG 요소 만들기
HTML 페이지 안에 사각형을 만든 다음 해당 사각형에 텍스트를 작성하고 싶습니다. 또한 해당 텍스트가 하이퍼 링크 여야합니다. 이것은 내가 한 일이지만 작동하지 않습니다.
<!DOCTYPE html>
<html>
<body>
<script>
var svg = document.documentElement;
var svgNS = svg.namespaceURI;
var rect = document.createElementNS(svgNS,'rect');
rect.setAttribute('x',5);
rect.setAttribute('y',5);
rect.setAttribute('width',500);
rect.setAttribute('height',500);
rect.setAttribute('fill','#95B3D7');
svg.appendChild(rect);
document.body.appendChild(svg);
var h=document.createElement('a');
var t=document.createTextNode('Hello World');
h.appendChild(t);
document.body.appendChild(h);
</script>
</body>
</html>
제발 도와 주 시겠어요? 감사.
변화
var svg = document.documentElement;
...에
var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
SVG요소 를 만들 수 있습니다 .
링크가 하이퍼 링크가 되려면 href속성을 추가하기 만하면됩니다 .
h.setAttributeNS(null, 'href', 'http://www.google.com');
이것을 html에 추가하십시오.
<svg id="mySVG" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"/>
이 기능을 시도하고 프로그램에 맞게 조정하십시오.
var svgNS = "http://www.w3.org/2000/svg";
function createCircle()
{
var myCircle = document.createElementNS(svgNS,"circle"); //to create a circle. for rectangle use "rectangle"
myCircle.setAttributeNS(null,"id","mycircle");
myCircle.setAttributeNS(null,"cx",100);
myCircle.setAttributeNS(null,"cy",100);
myCircle.setAttributeNS(null,"r",50);
myCircle.setAttributeNS(null,"fill","black");
myCircle.setAttributeNS(null,"stroke","none");
document.getElementById("mySVG").appendChild(myCircle);
}
svg 편집을 용이하게하기 위해 중간 기능을 사용할 수 있습니다.
function getNode(n, v) {
n = document.createElementNS("http://www.w3.org/2000/svg", n);
for (var p in v)
n.setAttributeNS(null, p, v[p]);
return n
}
이제 다음과 같이 작성할 수 있습니다.
svg.appendChild( getNode('rect', { width:200, height:20, fill:'#ff0000' }) );
예 (대시가있는 속성에 대해 camelcase를 허용하는 향상된 getNode 함수 (예 : strokeWidth> stroke-width)) :
function getNode(n, v) {
n = document.createElementNS("http://www.w3.org/2000/svg", n);
for (var p in v)
n.setAttributeNS(null, p.replace(/[A-Z]/g, function(m, p, o, s) { return "-" + m.toLowerCase(); }), v[p]);
return n
}
var svg = getNode("svg");
document.body.appendChild(svg);
var r = getNode('rect', { x: 10, y: 10, width: 100, height: 20, fill:'#ff00ff' });
svg.appendChild(r);
var r = getNode('rect', { x: 20, y: 40, width: 100, height: 40, rx: 8, ry: 8, fill: 'pink', stroke:'purple', strokeWidth:7 });
svg.appendChild(r);반응형
'Nice programing' 카테고리의 다른 글
| Excel의 하위 문자열 (0) | 2021.01.10 |
|---|---|
| Ubuntu 10.4에서 RubyGems 1.3.6을 어떻게 구할 수 있습니까? (0) | 2021.01.10 |
| 동기화 된 블록이 동기화 된 방법보다 나은 이유는 무엇입니까? (0) | 2021.01.09 |
| jQuery를 사용하여 선택 목록에서 선택한 속성 설정 (0) | 2021.01.09 |
| Jersey 클라이언트를 사용하여 POST 작업 수행 (0) | 2021.01.09 |