Html SVG 路径位置
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16255605/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Svg path position
提问by Davagaz
I have an SVG path, defined as follows:
我有一个 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>I need to give this path an absolute position. I have tried setting cxand cyattributes, but this did not work.
我需要给这条路径一个绝对位置。我试过设置cx和cy属性，但这没有用。
What can I do to set an absolute position?
我该怎么做才能设置绝对位置？
回答by Thomas W
Use the transformattribute to position the path, like
使用transform属性来定位路径，比如
transform="translate(50,80)"
Other transformations like scaleor rotateare also available. See the specs.
也可以使用其他转换，例如scale或rotate。请参阅规格。
回答by Peter Collingridge
I have a tool to do this at: http://petercollingridge.appspot.com/svg_transformsJust paste the individual element you want to change in the box and select 'Absolute' from the Path Type option.
我有一个工具可以在以下位置执行此操作：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>