Tuesday, April 9, 2013

SVG Hints


https://mdn.mozillademos.org/files/224/Canvas_default_grid.png 



 



 



 


Reverse/mirror translated text

<svg:text x="10" y="20" transform="scale(-1 1)">Reverse</svg:text>

 <svg:g xmlns="http://www.w3.org/2000/svg" transform="translate(0,0)" >


 <svg:g xmlns="http://www.w3.org/2000/svg" transform="translate(50,0)" >



Display graphic twice as large

transform="scale(2)"

Reduce the graphic by half

transform="scale(0.5)"



 

5:03 PMtech-mashup

Related Posts:

  • SVG Transform TranslateTranslate The translation is an elementary displacement transformation. Syntax: translate(tx, ty) tx x-coordinate of displacement ty y-coordinate of displacement Here we apply the translate transformation to the screw gro… Read More
  • SVG - Coordinate SystemsMost ProjectedCRS (Map Projection) have the north direction represented by positive values of the second axis and conversely SVG has a y-down coordinate system That's why, in order to follow the usual way to represent… Read More
  • SVG - Draw Arrow SVG  Sample 1 <svg xmlns="http://www.w3.org/2000/svg" viewBox="-50 -100 200 200"> <defs> <marker id='mid' orient="auto" markerWidth='2' markerHeight='4' refX='0.1' refY='1'> <!-- tr… Read More
  • SVG - Gradient in XSL with FOP graidient.svg <svg xmlns="http://www.w3.org/2000/svg" version="1.1">  <defs>    <linearGradient id="linearGradient" x1="0%" y1="0%" x2="100%" y2="0%">      <… Read More
  • SVG - Fixed the white dot/pixel in corner between lines/ rectangle or path Change values of the stroke-linecap property <line x1="10" y1="15" x2="50" y2="15" style="stroke-linecap: butt; stroke-width: 15;"/> <line x1="10" y1="45" x2="50" y2="45" style="stroke-linecap: roun… Read More