Ответ 1
Используйте атрибут transform
, чтобы расположить путь, например
transform="translate(50,80)"
Другие преобразования, такие как scale
или rotate
, также доступны. См. спецификации.
У меня есть путь 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
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>
Используйте атрибут transform
, чтобы расположить путь, например
transform="translate(50,80)"
Другие преобразования, такие как scale
или rotate
, также доступны. См. спецификации.
У меня есть инструмент для этого: http://petercollingridge.appspot.com/svg_transforms Просто вставьте отдельный элемент, который вы хотите изменить, в поле и выберите "Абсолют" из параметра "Тип пути".
<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>