Position des SVG-Pfads

Lesezeit: 3 Minuten

Benutzer-Avatar
Davagaz

Ich habe einen SVG-Pfad, der wie folgt definiert ist:

<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>

Ich muss diesem Pfad eine absolute Position geben. Einstellung habe ich versucht cx und cy Attribute, aber das hat nicht funktioniert.

Was kann ich tun, um eine absolute Position festzulegen?

  • Diese Antwort hilft Ihnen bei stackoverflow.com/questions/479591/svg-positioning

    – Alexandre Lavoie

    27. April 2013 um 19:15 Uhr


Verwenden Sie die transform Attribut, um den Pfad zu positionieren, wie

transform="translate(50,80)" 

Andere Transformationen wie scale oder rotate sind ebenfalls erhältlich. Siehe die Spezifikationen.

  • Dies funktioniert in meinem Fall nicht, ob per Inline-Stil oder CSS codepen.io/jarrodwhitley/pen/pooYgLN

    – Jarrodwhitley

    20. November 2019 um 21:34 Uhr

  • Dies ist kein Stilattribut oder CSS, sondern ein Transformationsattribut.

    –Thomas W

    26. November 2019 um 9:15 Uhr

  • Insbesondere die transform Attribut der SVG selbst.

    – skwidbreth

    12. Mai 2020 um 1:43 Uhr

Benutzer-Avatar
Peter Collingridge

Ich habe ein Tool, um dies zu tun: http://petercollingridge.appspot.com/svg_transforms
Fügen Sie einfach das einzelne Element, das Sie ändern möchten, in das Feld ein und wählen Sie „Absolut“ aus der Option „Pfadtyp“.

<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>

  • Dein Link ist tot. Bitte aktualisieren

    – Wallace Maxters

    26. März um 0:20 Uhr

Ich weiß, dass ich zu spät zur Party komme, aber wenn du eine hast <path> In Ihrem SVG definiert, das Sie mit X- und Y-Werten verschieben möchten, können Sie diesen Pfad in einen anderen einschließen <svg> Element, etwa 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/

Sie können den Pfad auch einschließen

<g transform="translate(offset_x,offset_y)"></g>

1256950cookie-checkPosition des SVG-Pfads

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy