수색…
비고
네이티브 DOM 인터페이스를 사용하여 SVG를 스크립팅하는 것은 현재 약간의 변화가있는 상태에서 (2016)입니다. 현재 SVG 표준 (1.1)은 대부분의 주요 웹 브라우저에서 잘 구현됩니다. 그러나 SVG 2.0 표준이 개발 중이기 때문에 일부 브라우저에서는 2.0에서 폐기 될 SVG 1.1 기능을 제거하기 시작했습니다. SVG 2.0의 부록 L 에서 SVG 1.1에서 SVG 2.0으로 제안 된 변경 사항의 전체 목록을 볼 수 있습니다.
pathSegList 및 다른 SVGPathSeg 사용법 바꾸기
SVG 1.1에서 <path> 요소는 모든 경로 명령 의 기본 표현에 대한 액세스를 제공하는 pathSegList 속성을 갖도록 정의됩니다. Google 크롬 v48 에서는 SVG 2.0에서 대체 제안 을 준비하기 위해 2015 년 말 에이 속성 을 삭제했습니다 . SVG 2.0 지원이 추가 될 때까지 polyfill을 사용 하여 1.1 기능을 다시 얻 거나 제안 된 2.0 API 를 구현해야합니다 .
getTransformToElement() 대체하기
Chrome v48에서는 SVGGraphicsElement.getTransformToElement() 메소드도 제거 했습니다. 기존의 메소드 를 구현 하기위한 간단한 polyfill이 존재합니다.
요소 만들기
SVG 요소 생성 및 수정을 이해하는 가장 간단한 방법은 HTML 또는 XML에서와 마찬가지로 DOM Level 2 Core 인터페이스를 사용하여 요소를 조작하는 것입니다.
"이 예에서 - 자바 스크립트에서 생성 된 요소가 SVG 요소에 선언 된 같은 네임 스페이스에 생성되는 것이 필수적이다 http://www.w3.org/2000/svg ". 그러나 SVG 요소의 거의 모든 속성 은 어떤 네임 스페이스에도 없습니다. 당신은 SVG 네임 스페이스에 배치하지 않아야합니다.
다음은 일반적인 경우이므로 HTML 내부에서 호스팅되는 SVG를 보여줍니다.
<!doctype HTML>
<html><title>Creating an Element</title>
<body>
<svg xmlns="http://www.w3.org/2000/svg"
width="100%" height="100%"
viewBox="0 0 400 300"></svg>
<script>
var svgNS = "http://www.w3.org/2000/svg";
// Create a circle element (not part of the DOM yet)
var circle = document.createElementNS(svgNS,'circle'); // Creates a <circle/>
circle.setAttribute('fill','red'); // Note: NOT setAttributeNS()
circle.setAttribute('cx',150); // setAttribute turns 150 into a string
circle.setAttribute('cy','80'); // using a string works, too
circle.setAttribute('r',35); // give the circle a radius so we can see it
// Now, add the circle to the SVG document so we can see it
var svg = document.querySelector('svg'); // the root <svg> element
svg.appendChild(circle);
</script>
</body></html>
특정 네임 스페이스에서 생성해야하는 몇 가지 특성이 있습니다. SVG 속성 색인 에서 이름에 콜론이있는 목록입니다. 구체적으로 xlink:actuate , xlink:arcrole , xlink:href , xlink:role , xlink:show , xlink:title , xlink:type , xml:base , xml:lang 및 xml:space 입니다. setAttributeNS() 사용하여 다음 속성을 설정하십시오.
var svgNS = "http://www.w3.org/2000/svg";
var xlinkNS = "http://www.w3.org/1999/xlink";
var img = document.createElementNS( svgNS, 'image' );
img.setAttributeNS( xlinkNS, 'href', 'my.png' );
특히 많은 특성을 가진 요소를 자주 작성하는 경우 다음과 같은 도우미 함수를 사용하면 입력 내용을 저장하고 실수를 방지하고 코드를 읽기 쉽게 만들 수 있습니다.
<!doctype HTML>
<html><title>Creating an Element</title>
<body>
<svg xmlns="http://www.w3.org/2000/svg"></svg>
<script>
var svg = document.querySelector('svg');
var circle = createOn( svg, 'circle', {fill:'red', cx:150, cy:80, r:35} );
// Create an SVG element on another node with a set of attributes.
// Attributes with colons in the name (e.g. 'xlink:href') will automatically
// find the appropriate namespace URI from the SVG element.
// Optionally specify text to create as a child node, for example
// createOn(someGroup,'text',{x:100,'text-anchor':'middle'},"Hello World!");
function createOn(parentEl,name,attrs,text){
var doc=parentEl.ownerDocument, svg=parentEl;
while (svg && svg.tagName!='svg') svg=svg.parentNode;
var el = doc.createElementNS(svg.namespaceURI,name);
for (var a in attrs){
if (!attrs.hasOwnProperty(a)) continue;
var p = a.split(':');
if (p[1]) el.setAttributeNS(svg.getAttribute('xmlns:'+p[0]),p[1],attrs[a]);
else el.setAttribute(a,attrs[a]);
}
if (text) el.appendChild(doc.createTextNode(text));
return parentEl.appendChild(el);
}
</script>
</body></html>
읽기 / 쓰기 속성
DOM Level 2 Core 메소드 인 getAttribute() , getAttributeNS() , setAttribute() 및 setAttributeNS() 를 사용하여 SVG 요소에서 값을 읽고 쓸 수 있으며 SVG 1.1 IDL에 지정된 사용자 정의 속성 및 메서드를 사용할 수 있습니다. 정의 언어).
간단한 숫자 속성
예를 들어, SVG 원 요소가있는 경우 :
<circle id="circ" cx="10" cy="20" r="15" />
DOM 메소드를 사용하여 속성을 읽고 쓸 수있다.
var circ = document.querySelector('#circ');
var x = circ.getAttribute('cx') * 1; // Use *1 to convert from string to number value
circ.setAttribute('cy', 25);
... 또는 SVGCircleElement 정의 된 사용자 정의 cx , cy 및 r 속성을 SVGCircleElement 있습니다. 이들은 직접 번호가 아니라 SVG 1.1에있는 많은 액세서와 마찬가지로 움직이는 값에 액세스 할 수 있습니다. 이러한 특성은 SVGAnimatedLength 유형입니다. 애니메이션 및 길이 단위를 무시하면 다음과 같은 특성을 사용할 수 있습니다.
var x = circ.cx.baseVal.value; // this is a number, not a string
circ.cy.baseVal.value = 25;
변환
SVG 그룹 은 여러 그래픽 요소 전체를 이동, 회전, 크기 조절 및 변환하는 데 사용할 수 있습니다. SVG 번역에 대한 자세한 내용은 7 장을 참조하십시오. 다음은 transform 조정하여 크기, 회전 및 배치를 조정할 수있는 웃는 얼굴을 만드는 그룹입니다.
<g id="smiley" transform="translate(120,120) scale(5) rotate(30)">
<circle r="20" fill="yellow" stroke-width="2"/>
<path fill="none" d="M-10,5 a 5 3 0 0 0 20,0" stroke-width="2"/>
<circle cx="-6" cy="-5" r="2" fill="#000"/>
<circle cx="6" cy="-5" r="2" fill="#000"/>
</g>
DOM 메소드를 통해 스크립트의 크기를 조정하기 위해 스크립트를 사용하려면 전체 transform 속성을 문자열로 조작해야합니다.
var face = document.querySelector('#smiley');
// Find the full string value of the attribute
var xform = face.getAttribute('transform');
// Use a Regular Expression to replace the existing scale with 'scale(3)'
xform = xform.replace( /scale\s*\([^)]+\)/, 'scale(3)' );
// Set the attribute to the new string.
face.setAttribute('transform',xform);
SVG DOM을 사용하면 목록의 특정 변환을 탐색하고 원하는 것을 찾은 다음 값을 수정할 수 있습니다.
var face = document.querySelector('#smiley');
// Get the SVGTransformList, ignoring animation
var xforms = face.transform.baseVal;
// Find the scale transform (pretending we don't know its index)
for (var i=0; i<xforms.numberOfItems; ++i){
// Get this part as an SVGTransform
var xform = xforms.getItem(i);
if (xform.type == SVGTransform.SVG_TRANSFORM_SCALE){
// Set the scale; both X and Y scales are required
xform.setScale(3,3);
break;
}
}
- 변환 수를 탐색하고 조작하려면
SVGTransformList참조하십시오. - 개별 변환을 조작하려면
SVGTransform참조하십시오.
SVG 요소 끌기
마우스를 사용하여 SVG 요소 (또는 요소 그룹)를 드래그하면 다음을 수행 할 수 있습니다.
-
mousedown핸들러를 추가하여 드래그를 시작합니다. 필요한 경우 드래그하는 동안 사용할 요소에 대한 번역 추가,mousemove이벤트 추적 및 드래그를 끝내기위한mouseup핸들러 추가. -
mousemove동안 화면 좌표에서 드래그하는 객체의 로컬 좌표로 마우스의 위치를 변형하고 그에 따라 번역을 업데이트하십시오. -
mouseup중에mousemove및mouseup처리기를 제거하십시오.
// Makes an element in an SVG document draggable.
// Fires custom `dragstart`, `drag`, and `dragend` events on the
// element with the `detail` property of the event carrying XY
// coordinates for the location of the element.
function makeDraggable(el){
if (!el) return console.error('makeDraggable() needs an element');
var svg = el;
while (svg && svg.tagName!='svg') svg=svg.parentNode;
if (!svg) return console.error(el,'must be inside an SVG wrapper');
var pt=svg.createSVGPoint(), doc=svg.ownerDocument;
var root = doc.rootElement || doc.body || svg;
var xlate, txStartX, txStartY, mouseStart;
var xforms = el.transform.baseVal;
el.addEventListener('mousedown',startMove,false);
function startMove(evt){
// We listen for mousemove/up on the root-most
// element in case the mouse is not over el.
root.addEventListener('mousemove',handleMove,false);
root.addEventListener('mouseup', finishMove,false);
// Ensure that the first transform is a translate()
xlate = xforms.numberOfItems>0 && xforms.getItem(0);
if (!xlate || xlate.type != SVGTransform.SVG_TRANSFORM_TRANSLATE){
xlate = xforms.createSVGTransformFromMatrix( svg.createSVGMatrix() );
xforms.insertItemBefore( xlate, 0 );
}
txStartX=xlate.matrix.e;
txStartY=xlate.matrix.f;
mouseStart = inElementSpace(evt);
fireEvent('dragstart');
}
function handleMove(evt){
var point = inElementSpace(evt);
xlate.setTranslate(
txStartX + point.x - mouseStart.x,
txStartY + point.y - mouseStart.y
);
fireEvent('drag');
}
function finishMove(evt){
root.removeEventListener('mousemove',handleMove,false);
root.removeEventListener('mouseup', finishMove,false);
fireEvent('dragend');
}
function fireEvent(eventName){
var event = new Event(eventName);
event.detail = { x:xlate.matrix.e, y:xlate.matrix.f };
return el.dispatchEvent(event);
}
// Convert mouse position from screen space to coordinates of el
function inElementSpace(evt){
pt.x=evt.clientX; pt.y=evt.clientY;
return pt.matrixTransform(el.parentNode.getScreenCTM().inverse());
}
}
