css 是否将textPath方向从逆时针翻转为顺时针？

chhkpiq4 于 2023-03-05 发布在其他

关注(0)|答案(1)|浏览(152)

默认情况下，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>

css

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

1条答案

按热度按时间

5cg8jx4n1#

我设法解决了这个问题。您所需要做的就是将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>

赞(0）回复(0）举报 2023-03-05

我来回答

css 是否将textPath方向从逆时针翻转为顺时针？

1条答案

相关问题

热门标签

最新问答