侧

可用性有限

此特性不是基线特性，因为它在一些最广泛使用的浏览器中不起作用。

实验性： 这是一项实验性技术
在生产中使用此技术之前，请仔细检查浏览器兼容性表格。

side 属性决定了文本放置在路径的哪一侧（相对于路径方向）。

你可以将此属性与以下 SVG 元素一起使用

<textPath>

示例

html,
body,
svg {
  height: 100%;
}

text {
  font:
    25px "Helvetica",
    "Arial",
    sans-serif;
}

html

<svg viewBox="0 0 420 200" xmlns="http://www.w3.org/2000/svg">
  <text>
    <textPath href="#circle1" side="left">Text left from the path</textPath>
  </text>
  <text>
    <textPath href="#circle2" side="right">Text right from the path</textPath>
  </text>

  <circle
    id="circle1"
    cx="100"
    cy="100"
    r="70"
    fill="transparent"
    stroke="silver" />
  <circle
    id="circle2"
    cx="320"
    cy="100"
    r="70"
    fill="transparent"
    stroke="silver" />
</svg>

用法说明

值	`left` \| `right`
默认值	`left`
可动画的	是

left: 此值将文本放置在路径的左侧（相对于路径方向）。
right: 此值将文本放置在路径的右侧（相对于路径方向）。这实际上会反转路径方向。

规范

规范
Scalable Vector Graphics (SVG) 2 # TextPathElementSideAttribute

浏览器兼容性

帮助改进 MDN

了解如何贡献

此页面最后修改于 2025年10月13日，由 MDN 贡献者。

在 GitHub 上查看此页面 • 报告此内容的可能问题