Svg路径位置 [英] Svg path position

问题描述

我有一个SVG路径，定义如下：

< pre class =snippet-code-html lang-html prettyprint-override svg version =1.1id =Layer_1xmlns =http://www.w3.org/2000/svgxmlns：xlink =http://www.w3.org/1999/xlinkx = 0pxy =0pxwidth =200pxheight =280pxviewBox =0 0 850.39 850.39enable-background =new 0 0 850.39 850.39xml：space =preserveclass =hand> < g取代; < path fill-rule =evenoddclip-rule =evenoddfill =＃0D0D0Dd =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/> < / svg>

$ b

给这条道路一个绝对的位置。我尝试设置 cx 和 cy 属性，但这不起作用。

我可以做些什么来设定绝对位置？

解决方案使用变换属性来定位路径，就像

  transform =translate（50,80）
  

其他转换如缩放或旋转也可用。 查看规格。

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?

解决方案

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.

这篇关于Svg路径位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！