1. Dom
  2. Pytanie i odpowiedź
  3. pozycji ścieżki Svg

pozycji ścieżki Svg

2013-04-27 12 views
15

mam ścieżki SVG zdefiniowane następująco:pozycji ścieżki Svg

<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 
 
    \t \t 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 
 
    \t \t 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 
 
    \t \t 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 
 
    \t \t 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 
 
    \t \t 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 
 
    \t \t 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 
 
    \t \t 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 
 
    \t \t 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 
 
    \t \t 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 
 
    \t \t 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 
 
    \t \t 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 
 
    \t \t 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 
 
    \t \t 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 
 
    \t \t 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 
 
    \t \t C490.919,872.699,481.396,702.414,480.366,674.977L480.366,674.977z" /> 
 
    </g> 
 
</svg>

trzeba podać tę ścieżkę położenie bezwzględne. Próbowałem ustawić atrybuty cx i cy, ale to nie zadziałało.

Co mogę zrobić, aby ustawić pozycję absolutną?

Źródło

2013-04-27 Davagaz

+0

Ta odpowiedź pomoże Ci http://stackoverflow.com/questions/479591/svg-positioning –

Odpowiedz

27

użyć atrybutu transform aby ustawić ścieżkę, jak

transform="translate(50,80)"

Inne przemian jak scale lub rotate są również dostępne. See the specs.

Źródło

2013-04-29 20:08:24

8

Mam narzędzie do robienia tego na: http://petercollingridge.appspot.com/svg_transforms Wystarczy wkleić pojedynczy element, który chcesz zmienić w polu i wybierz opcję "Bezwzględny" z opcji Typ ścieżki.

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

Źródło

2013-04-29 19:34:22

Powiązane problemy

 Powiązane problemy