mozilla

Compare Revisions

SVGTransformList

Change Revisions

Revision 311465:

Revision 311465 by JohnBicknell on

Revision 385191:

Revision 385191 by arasbm on

Title:
SVGTransformList
SVGTransformList
Slug:
DOM/SVGTransformList
DOM/SVGTransformList
Tags:
"SVG DOM", "SVG", "NeedsBrowserCompatibility"
"SVG DOM", "SVG", "NeedsBrowserCompatibility"
Content:

Revision 311465
Revision 385191
tt290    <h2 name="Browser_compatibility">
291      Example
292    </h2>
293    <h3>
294      Using multiple SVGTransform objects
295    </h3>
296    <p>
297      In this example we create a function that will apply three 
 >different transformations to the SVG element that has been clicke
 >d on. In order to do this we create a separate SVGTransform objec
 >t for each transformation -- such as translate, rotate, and scale
 >. We apply multiple transformation by appending the transform obj
 >ect to the SVGTransformList associated with an SVG element.
298    </p>
299    <pre class="brush: html">
300&lt;svg id="my-svg" width="20cm" height="20cm" viewBox="0 0 600 6
 >00"
301     xmlns="http://www.w3.org/2000/svg" version="1.1"&gt;
302  &lt;desc&gt;Example showing how to transform svg elements that 
 >using SVGTransform objects&lt;/desc&gt;
303  &lt;script type="application/ecmascript"&gt; &lt;![CDATA[
304    function transformMe(evt) {
305      // svg root element to access the createSVGTransform() func
 >tion
306      var svgroot = evt.target.parentNode;
307 
308      // SVGTransformList of the element that has been clicked on
309      var tfmList = evt.target.transform.baseVal;
310 
311      // Create a seperate transform object for each transform
312      var translate = svgroot.createSVGTransform();
313      translate.setTranslate(50,5);
314      
315      var rotate = svgroot.createSVGTransform();
316      rotate.setRotate(10,0,0);
317 
318      var scale = svgroot.createSVGTransform();
319      scale.setScale(0.8,0.8);
320 
321      // apply the transformations by appending the SVGTranform o
 >bjects to the SVGTransformList associated with the element
322      tfmList.appendItem(translate);
323      tfmList.appendItem(rotate);
324      tfmList.appendItem(scale);
325    }
326  ]]&gt; &lt;/script&gt;
327 
328  &lt;polygon fill="orange" stroke="black" stroke-width="5"
329           points="100,225 100,115 130,115 70,15 70,15 10,115 40,
 >115 40,225" 
330           onclick="transformMe(evt)"/&gt;
331  &lt;rect x="200" y="100" width="100" height="100" 
332        fill="yellow" stroke="black" stroke-width="5"  
333        onclick="transformMe(evt)"/&gt;
334  &lt;text x="40" y="250"
335        font-family="Verdana" font-size="16" fill="green" &gt;
336    Click on a shape to transform it
337  &lt;/text&gt;
338&lt;/svg&gt;
339</pre>
340    <p>
341      Live preview:
342    </p>
343    <p>
344      {{EmbedLiveSample("Using_multiple_SVGTransform_objects",400
 >,400)}}
345    </p>

Back to History