SVG指向相对于点而不是绝对点的路径

时间:2016-03-13 12:10:28

标签: svg svg-path

我的数据分为两部分:

  1. 位置x,y
  2. 点px1,py1 px2,py2 .... pxn,pyn
  3. 我正在根据这些数据构建S​​VG,但我希望这些点与位置相关,例如未处理的点数如下

    <svg height="210" width="500" viewBox='0 0 256 512' xmlns='http://www.w3.org/2000/svg' version='1.1' >
      <polygon 
          points="37.2016,0 0,28.1848 14.2097,73.7889 60.1934,73.7889 74.4032,28.1848 37.2016,0" 
          style="fill:lime;stroke:purple;stroke-width:1" />
    </svg>
    

    但是对象左上角的位置应该是100,100,所以这些点应该都有100个。

    现在,我当然可以在处理数据以生成SVG的代码中执行此操作,但是有一种简单的方法可以向点添加偏移或偏移吗?

    我尝试了以下内容(添加了x =和y =),但它对查看SVG没有任何影响:

    <svg height="210" width="500" viewBox='0 0 256 512' xmlns='http://www.w3.org/2000/svg' version='1.1' >
      <polygon 
         x="100" y="100"
         points="37.2016,0 0,28.1848 14.2097,73.7889 60.1934,73.7889 74.4032,28.1848 37.2016,0" 
         style="fill:lime;stroke:purple;stroke-width:1" />
    </svg>
    

1 个答案:

答案 0 :(得分:1)

当然,添加transform =&#34;翻译(100,100)&#34;到多边形并删除无用的x和y属性。

相关问题