Flipping textPath direction from anti-clockwise to clockwise?

前提是你 提交于 2021-01-27 06:52:52

问题


By default, SVG wraps text around a path in an anti-clockwise manner. The ceiling of the text sticks the path. How to change the direction to clockwise so that the floor of the text sticks to the circumference instead of the ceiling?

.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>

回答1:


I managed to solve this. All you need to do is set the value of sweep-flag from 0 to 1. That will flip the direction of 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>


来源:https://stackoverflow.com/questions/29588905/flipping-textpath-direction-from-anti-clockwise-to-clockwise

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!