时间戳

首页 > 解决方案 > 如何在 Chrome 中设置 `textPath` 的 `side: right`？

d3.js - 如何在 Chrome 中设置 `textPath` 的 `side: right`？

问题描述

sideChrome 不支持。

并且rotateon textPathdosen't work while rotateontext会影响到path我真正想要的东西。

textPath.attr("transform", "rotate(180)"); // not work

textPath.attr("side", "right"); // not work

有没有其他方法可以达到同样的效果？</p>

标签： d3.jssvg

解决方案

下一个演示的第一部分取自 MDN。正在使用side，但在 Chrome 中不受支持。

第二部分是替代解决方案，您可以按照 Kaiido 的建议反转路径。

svg{border:1px solid; width:90vh;}

text {
  font: 25px Arial, Helvelica, sans-serif;
}
<svg viewBox="0 0 400 400" >
<!--MDN-->
  <text>
    <textPath href="#circle1" side="left">Side left</textPath>
  </text>
  <text>
    <textPath href="#circle2" side="right">Text right</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"/>
<!--MDN-->
<!--Alternative solution-->  
  <path id="p1" d="M160,300A70,70 0 0 1 20 300" fill="none" stroke="red" />

  <text>
    <textPath href="#p1">path left</textPath>
  </text>
  
  <g transform ="translate(230,0)">"
  <path id="p2" d="M160,300A70,70 0 0 0 20 300" fill="none" stroke="red" />     
  <text>
    <textPath href="#p2">path right</textPath>
  </text>
  </g> 
<!--Alternative solution-->  
</svg>

推荐阅读