SVG
स्क्रिप्टिंग
खोज…
टिप्पणियों
मूल डोम इंटरफेस का उपयोग कर एसवीजी की स्क्रिप्टिंग वर्तमान में (2016) थोड़े परिवर्तन की स्थिति में है। वर्तमान एसवीजी मानक (1.1) सबसे प्रमुख वेब ब्राउज़रों द्वारा अच्छी तरह से लागू किया गया है। हालांकि, जैसा कि एसवीजी 2.0 मानक विकास के अधीन है, कुछ ब्राउज़रों ने एसवीजी 1.1 सुविधाओं को हटाना शुरू कर दिया है जो 2.0 में अप्रचलित होंगे। आप SVG 2.0 के परिशिष्ट L में SVG 1.1 से SVG 2.0 तक प्रस्तावित परिवर्तनों की एक पूरी सूची देख सकते हैं।
pathSegList और अन्य SVGPathSeg उपयोग करना
SVG 1.1 में <path> तत्वों को एक pathSegList संपत्ति के रूप में परिभाषित किया गया है जो सभी पथ कमांडों के मूल प्रतिनिधित्व तक पहुंच प्रदान करता है। एसवीजी 2.0 में प्रस्तावित प्रतिस्थापन की तैयारी में, Google क्रोम v48 ने 2015 के अंत में इस संपत्ति को हटा दिया । जब तक एसवीजी 2.0 समर्थन जोड़ा नहीं जाता है, तब तक आपको 1.1 कार्यक्षमता वापस पाने के लिए या प्रस्तावित 2.0 एपीआई को लागू करने के लिए पॉलीफ़िल का उपयोग करना चाहिए।
getTransformToElement() जगह
Chrome v48 ने SVGGraphicsElement.getTransformToElement() विधि को भी हटा दिया । पुरानी पद्धति को लागू करने के लिए एक साधारण पॉलीफिल मौजूद है।
एक तत्व बनाना
एसवीजी तत्वों को बनाने और संशोधित करने का सबसे सरल तरीका है कि आप डोम स्तर 2 कोर इंटरफेस का उपयोग करते हुए तत्वों पर काम कर सकें , जैसा कि आप HTML या XML के साथ करेंगे।
यह आवश्यक है कि जावास्क्रिप्ट से बनाए गए तत्व एक ही नाम स्थान एसवीजी तत्व में घोषित में बनाए जाते हैं - इस उदाहरण में: " http://www.w3.org/2000/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: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>
पढ़ना / लिखना विशेषताएँ
आप SVG तत्वों से मान पढ़ने और लिखने के लिए DOM लेवल 2 कोर मेथड्स getAttribute() , getAttributeNS() , setAttribute() , और setAttributeNS() का उपयोग कर सकते हैं, या आप 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);
... या आप कस्टम का उपयोग कर सकते cx , cy , और r संपत्तियों के लिए परिभाषित SVGCircleElement । ध्यान दें कि ये प्रत्यक्ष संख्या नहीं हैं, बल्कि एसवीजी 1.1 में कई एक्सेसरों के साथ-वे एनिमेटेड मूल्यों तक पहुंच की अनुमति देते हैं। ये गुण SVGAnimatedLength प्रकार के हैं। एनीमेशन और लंबाई इकाइयों की उपेक्षा, आप इस तरह की विशेषताओं का उपयोग कर सकते हैं:
var x = circ.cx.baseVal.value; // this is a number, not a string
circ.cy.baseVal.value = 25;
रूपांतरण
एसवीजी समूहों को एक साथ कई ग्राफिकल तत्वों को स्थानांतरित करने, घुमाने, स्केल करने और अन्यथा बदलने के लिए उपयोग किया जा सकता है। (एसवीजी अनुवाद पर विवरण के लिए, अध्याय 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);
एसवीजी डोम के साथ एक सूची में विशिष्ट परिवर्तनों को पार कर सकता है, वांछित को ढूंढ सकता है और मूल्यों को संशोधित कर सकता है:
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देखें।
एसवीजी तत्वों को खींचना
एसवीजी तत्व (या तत्वों के समूह) को खींचने के लिए माउस का उपयोग करके पूरा किया जा सकता है:
- जोड़ना
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());
}
}
