将 textPath 方向从逆时针方向翻转到顺时针方向？

【问题标题】：Flipping textPath direction from anti-clockwise to clockwise?将 textPath 方向从逆时针方向翻转到顺时针方向？
【发布时间】：2015-04-12 20:24:01
【问题描述】：

默认情况下，SVG 以逆时针方式将文本环绕在路径周围。文字的天花板贴着路径。如何将方向改为顺时针，使文字的地板贴在圆周上而不是贴在天花板上？

.textspace
{
	letter-spacing: 5px;
	font-family: fantasy;
	font-size: 50px;
	writing-mode: tb;
}

.curved-text
{
	font-family: fantasy;
	font-size: 20px;
	letter-spacing: 5px;
	word-spacing: 10px;
}

	<svg height="400" width="400">
		<defs>
			<path	d="M60,60
						A50,50
						0 
						1,0
						61,60"
						stroke="black"
						stroke-width="2"
						fill="none"
						id="tracker-path"/>
		</defs>
		<text x="50" y="50" class="curved-text">
			<textPath xlink:href="#tracker-path">
				Tracking succesful.
			</textPath>
		</text>
	</svg>

【问题讨论】：

标签： html css svg

【解决方案1】：

我设法解决了这个问题。您需要做的就是将sweep-flag 的值从0 设置为1。这将翻转path 的方向

.textspace
{
	letter-spacing: 5px;
	font-family: fantasy;
	font-size: 50px;
	writing-mode: tb;
}

.curved-text
{
	font-family: fantasy;
	font-size: 20px;
	letter-spacing: 5px;
	word-spacing: 10px;
}

<svg height="400" width="400">
		<defs>
			<path	 d="M80,160
						A50,50
						0 
						1,1
						81,160"
						stroke="black"
						stroke-width="2"
						fill="none"
						id="tracker-path"/>
		</defs>
		<text x="50" y="50" class="curved-text">
			<textPath xlink:href="#tracker-path">
				Tracking succesful.
			</textPath>
		</text>
	</svg>

【讨论】：