Scale path from center

by

If you know the coordinates of the center point, then you can combine a translate and scale in one transformation. The translation is calculated as: (1 - scale) * currentPosition.

If the center is (10, 20) and you are scaling by 3 then translate by (1 - 3)*10, (1 - 3)*20 = (-20, -40):

<g transform="translate(-20, -40) scale(3)">
    <path d="M45,11.5H33.333c0.735-1.159,1.167-2.528,1.167-4C34.5,3.364,31.136,0,27,0s-7.5,3.364-7.5,7.5c0,1.472,0.432,2.841,1.167,4H9l-9,32h54L45,11.5z M22.5,7.5C22.5,5.019,24.519,3,27,3s4.5,2.019,4.5,4.5c0,1.752-1.017,3.257-2.481,4h-4.037 C23.517,10.757,22.5,9.252,22.5,7.5z" id="control"/>
</g>

The transformations are applied in reverse order from the one they are declared, so in the example, above, the scale is performed first and then the translate. Scaling affects the coordinates so the translation here is in scaled coordinates.

You can calculate the center point programmatically using element.getBBox().

More Related Contents:

  1. How to draw human body in html5 svg and roate it in 360degree [closed]
  2. How to create a circle with links on border side
  3. How to apply a style to an embedded SVG?
  4. SVGs not scaling properly in IE – has extra space
  5. Add a background image (.png) to a SVG circle shape
  6. How to style SVG with external CSS?
  7. html/css hexagon with image inside
  8. Setting transform-origin on SVG group not working in Firefox
  9. d3 Node Labeling
  10. Responsive CSS Trapezoid Shape
  11. How do you convert screen coordinates to document space in a scaled SVG?
  12. Creating a ‘New’ spiky label with 24 or above point burst
  13. How to cut a circular part from an image?
  14. Making an svg image object clickable with onclick, avoiding absolute positioning
  15. How to change SVG color when it is an encoded CSS background image?
  16. Draw double curved item with beveled edges
  17. How to get rid of extra space below svg in div element
  18. How to get ScrollBars in SVG?
  19. div with triangle at the bottom with background image
  20. Insert HTML code inside SVG Text element
  21. Cross-browser embedded font in svg image
  22. SVG LinearGradient hidden if svg is hidden in seperate class
  23. How to render svg elements with crisp edges while still keeping anti-aliasing?
  24. How to display multiple lines of text in SVG?
  25. How to curve the div from bottom with image background
  26. Fast and responsive interactive charts/graphs: SVG, Canvas, other?
  27. How can I embed SVG into HTML in an email, so that it’s visible in most/all email browsers?
  28. SVG coordinates with transform matrix
  29. Scale SVG to container without mask/crop
  30. Does svg xmlns attribute value requires protocol? Can it be https or relative?

Leave a Comment