58

I have an SVG path, defined as follows:

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="200px"
height="280px" viewBox="0 0 850.39 850.39"
enable-background="new 0 0 850.39 850.39" xml:space="preserve" class="hand">
  <g>
    <path fill-rule="evenodd" clip-rule="evenodd" fill="#0D0D0D" d="M480.366,674.977c-1.345-36.176,16.102-91.082,42.928-100.447
    		s99.269-89.711,108.649-100.418c9.381-10.734,14.758-17.416,24.139-45.541c9.409-28.123,54.996-69.638,54.996-69.638
    		c18.79-20.072,36.236-25.44,45.616-25.44c9.381,0,29.515-5.368,34.863-14.733c5.377-9.365,6.721-30.779-26.826-44.199
    		c-33.519-13.362-54.997-24.098-127.411,36.176c-72.442,60.245-97.925,3.997-97.925,3.997c-30.859-54.877-16.102-137.906,0-199.522
    		c16.102-61.587,20.105-172.74,12.069-190.157c-8.037-17.389-34.12-19.33-45.617-10.707c-12.212,9.193-22.793,89.739-32.174,124.544
    		c-9.409,34.805-25.482,97.763-25.482,97.763c-4.032,42.856-36.236,28.124-46.96,20.072c-10.725-8.023-17.446-73.636-16.102-84.343
    		c1.344-10.735,0-41.515-1.344-49.566c-1.315-8.023-21.45-97.762-25.482-128.542c-4.004-33.492-29.515-40.173-42.928-38.831
    		c-13.384,1.313-22.794,13.391-22.794,25.44c0,12.049,9.41,115.151,6.721,123.203c-2.688,8.023,1.344,73.636,6.692,83.029
    		c1.344,12.049,9.38,68.268,4.032,70.952c-5.348,2.684-17.446-13.391-25.482-38.831c-8.065-25.44-24.138-73.636-24.138-73.636
    		c-9.409-21.443-14.757-79.032-20.134-104.472c-5.348-25.44-20.105-34.805-38.895-32.15c-16.102,2.684-26.827,28.152-24.138,40.202
    		c5.348,9.365,18.761,155.323,24.138,167.373c5.348,12.049,26.826,80.345,25.482,85.713c-1.344,5.339-8.065,8.023-20.134,3.998
    		c-12.041-3.998-71.07-113.809-71.07-113.809c-21.45-37.489-25.482-72.323-60.374-57.59c-22.793,12.049-9.38,34.833-4.004,57.59
    		c8.037,36.147,84.512,166.059,79.135,180.792c-5.377,14.733,28.17,176.737,28.17,176.737c0,26.783,65.722,156.695,68.381,164.719
    		c2.717,8.051,2.145,84.17,0,113.836c-1.916,27.012-6.635,164.547-9.123,239.324c-0.257,8.023,2.431,15.018,8.037,20.785
    		c5.577,5.768,12.498,8.709,20.534,8.709H469.87c8.265,0,15.387-3.111,20.992-9.164c5.634-6.082,8.179-13.42,7.521-21.643
    		C490.919,872.699,481.396,702.414,480.366,674.977L480.366,674.977z" />
  </g>
</svg>

I need to give this path an absolute position. I have tried setting cx and cy attributes, but this did not work.

What can I do to set an absolute position?

1

4 Answers 4

85

Use the transform attribute to position the path, like

transform="translate(50,80)" 

Other transformations like scale or rotate are also available. See the specs.

5
  • This does not work in my case whether by inline style or CSS codepen.io/jarrodwhitley/pen/pooYgLN Nov 20, 2019 at 21:34
  • 5
    This is not a style attribute or CSS, it's a transform attribute.
    – Thomas W
    Nov 26, 2019 at 9:15
  • Specifically, the transform attribute of the SVG itself.
    – skwidbreth
    May 12, 2020 at 1:43
  • I could not take a spec like that and give a helpful, precise answer like you did; at least not in a reasonable amount of time. I would like to be able to do that, though. Do I need to become a domain expert or are there tricks on how to parse specs more quickly?
    – erikbstack
    Sep 27, 2022 at 10:07
  • What specs? Just read up on how to use SVG elements, MDN has plenty of information there. Dec 29, 2022 at 23:57
14

I have a tool to do this at: http://petercollingridge.appspot.com/svg_transforms Just paste the individual element you want to change in the box and select 'Absolute' from the Path Type option.

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" width="200px" height="280px" viewBox="250 300 400 400">
  <g>
    <path fill-rule="evenodd" clip-rule="evenodd" fill="#0D0D0D" d="M480.37 674.98S579.64 585.27 589.02 574.56C598.4 563.82 603.77 557.14 613.15 529.02C622.56 500.9 668
    .15 459.38 668.15 459.38C686.94 439.31 704.39 433.94 713.77 433.94C723.15 433.94 743.28 428.57 748.63 419.21C754.01 409.84 755.35 388.43 721.8 375.01C688.28 361
    .65 666.81 350.91 594.39 411.18C521.95 471.43 496.47 415.18 496.47 415.18C465.61 360.3 480.36 277.27 496.47 215.66C512.57 154.07 516.57 42.92 508.54 25.5C500.5
    8.11 474.42 6.17 462.92 14.79C450.71 23.99 440.13 104.53 430.74 139.34C421.34 174.14 405.26 237.1 405.26 237.1C401.23 279.96 369.03 265.23 358.3 257.17C347.58
    249.15 340.86 183.54 342.2 172.83C343.54 162.1 342.2 131.32 340.86 123.26C339.54 115.24 319.41 25.5 315.37 -5.28C311.37 -38.77 285.86 -45.45 272.45 -44.11C259
    .06 -42.8 249.65 -30.72 249.65 -18.67C249.65 -6.62 259.06 96.48 256.37 104.53C253.69 112.56 257.72 178.17 263.07 187.56C264.41 199.61 272.45 255.83 267.1 258.
    52C261.75 261.2 249.65 245.12 241.62 219.68C233.55 194.24 217.48 146.05 217.48 146.05C208.07 124.61 202.72 67.02 197.34 41.58C192 16.14 177.24 6.77 158.45 9.
    43C142.35 12.11 131.62 37.58 134.31 49.63C139.66 58.99 153.07 204.95 158.45 217C163.8 229.05 185.27 297.35 183.93 302.71C182.59 308.05 175.87 310.74 163.8 306
    .71C151.76 302.71 92.73 192.9 92.73 192.9C71.28 155.41 67.24 120.58 32.35 135.31C9.56 147.36 22.97 170.15 28.35 192.9C36.39 229.05 112.86 358.96 107.48 373.
    7C102.11 388.43 135.65 550.43 135.65 550.43C135.65 577.22 201.38 707.13 204.03 715.15C206.75 723.2 206.18 799.32 204.03 828.99C202.12 856 197.4 993.53 194.91
    1068.31C194.65 1076.33 197.34 1083.33 202.95 1089.1C208.53 1094.87 215.45 1097.81 223.48 1097.81H469.87C478.14 1097.81 485.26 1094.7 490.86 1088.64C496.5
    1082.56 499.04 1075.22 498.38 1067C490.92 872.7 481.4 702.41 480.37 674.98L480.37 674.98z" />
  </g>
</svg>

1
  • 3
    Your link is dead. Please, update Mar 26, 2022 at 0:20
12

I know I am late to the party but if you have a <path> defined within your SVG that you'd like to move with X and Y values, you can wrap that path within another <svg> element, like so:

<svg
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink"
  viewBox="0 0 500 500">
  <svg
    x="200"
    y="200">
    <path
      d="M32.77 32.77c-.373.372-.763.714-1.169 1.027l-7.388 7.387-7.392-7.39a12.115 12.115 0 01-2.192-2.193L4.485 21.456C-.2 16.77-.2 9.172 4.485 4.486c4.687-4.687 12.285-4.687 16.97 0l2.758 2.757 2.758-2.758C31.657-.2 39.255-.2 43.94 4.485c4.686 4.687 4.686 12.285 0 16.97L33.797 31.602c-.313.406-.655.796-1.027 1.169z"
      fill="#E84235"
      fill-rule="evenodd" />
  </svg>
</svg>

https://www.jotform.com/blog/better-positioning-and-transforming-with-nested-svgs/

4
  • you can't nest svg elements. Dec 30, 2022 at 22:42
  • 1
    Yes, you can... Jan 14 at 21:20
  • Might need a link to the spec that says this is possible then, I can't seem to find anything that explicitly explains this is actually legal. Jan 14 at 23:15
  • 1
    In the 1.1 specs, <svg> is one of the structural elements. All the structural elements except for <use> have the same content model and may be nested inside one another.
    – Thomas W
    Jan 24 at 22:32
5

You can also wrap the path in

<g transform="translate(offset_x,offset_y)"></g>
1
  • Thats redundant
    – Deon Rich
    Aug 7, 2021 at 20:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.