如何说清svg标签中各参数的意义？

Question

有这样一段代码，里面的参数意义，搞不明白：

    <svg id="test">
        <defs>
            <path id="path1" d="M75,20,a1,1 0 0,0 100,0"></path>
        </defs>
        <a xlink:href="http://www.baidu.com" target="_blank">
            <text x="10" y="100" style="fill: red;">
              <textPath xlink:href="#path1">hello welcome xian</textPath>
            </text>
        </a>
    </svg>

1.text中的x,y ?
2.path中的d中的第一对参数 75,20 ,还有最后一对参数100,0 。它们的含义。

请看下面两段对比的代码

<style>
#test{
border: 1px solid red;
}
</style>
<div id="s1">
<svg id="test">
    <defs>
        <path id="path1" d="M75,20,a1,1 0 0,0 100,0"></path>
    </defs>
    <a xlink:href="http://www.baidu.com" target="_blank">
        <text x="10" y="100" style="fill: red;">
          <textPath xlink:href="#path1">hello welcome xian</textPath>
        </text>
    </a>
</svg>
</div>    

<div id="s2">
<svg id="test">
    <defs>
        <path id="path1" d="M75,80,a1,1 0 0,0 200,100"></path>
    </defs>
    <a xlink:href="http://www.baidu.com" target="_blank">
        <text x="0" y="0" style="fill: red;">
          <textPath xlink:href="#path1">hello welcome xian</textPath>
        </text>
    </a>
</svg>
</div>

看到浏览器显示的效果后，我无法说清参数的含义了

Answer 1

1. <text> 中的 x 和 y 如其名一般，定义标签在 <svg> 画布中的二维坐标（横轴与纵轴）。
2. <path> 中的 d，其 M 是指画笔原点绝对定位，设 x 为 75，y 为 20；至于 a 最后的两个参数，是指弧线结束坐标（x 与 y）。

补充一点，间隔 <path> 指令参数，最好不要加这么多逗号（,），直接空格就好了。

<svg id="test">
    <defs>
        <path id="path" d="M75 20 a1 1 0 0 0 100 0"/>
    </defs>
    <text x="10" y="100" fill="#099">
        <textPath xlink:href="#path">划呀划呀划呀划呀划呀划</textPath>
    </text>
</svg>