我正在try 创建一个椭圆形的文本段落,我使用了SVG并设置了文本路径,还添加了起始偏移量,但问题是我无法估计段落的长度,如果段落的长度大于此值,那么文字将变得混乱

Here is the image where I show all the issues enter image description here

  1. 我想要什么
  2. 我试过的
  3. 我面临的问题

当字长更大时,情况就更糟了.

我们可以根据字长动态设置起始偏移量吗.

<svg width="500" height="400" viewBox="0 -15 200 130" style="transform: rotate(71deg);">
  <path d="M0,50 c0,-65 200,-65 200,0 c0,65 -200,65 -200,0" fill="transparent"></path>
  <path id="shape2" d="M0,50 c0,65 200,65 200,0 c0,-65 -200,-65 -200,0" fill="none"></path>
  <path id="shape" d="M12,50 c0,-52 180,-52 176,0 c0,52 -180,52 -176,0" fill="transparent" stroke="transparent"></path>
          <text><textPath startOffset="0" xlink:href="#shape2">bag</textPath></text>
        <text><textPath startOffset="30" xlink:href="#shape2">bag</textPath></text>
         <text><textPath startOffset="60" xlink:href="#shape2">bag</textPath></text>
          <text><textPath startOffset="90" xlink:href="#shape2">bag</textPath></text>
         <text><textPath startOffset="120" xlink:href="#shape2">bag</textPath></text> 
        <text><textPath startOffset="150" xlink:href="#shape2">bag</textPath></text>
         <text><textPath startOffset="170" xlink:href="#shape2">bag</textPath></text>
         <text><textPath startOffset="200" xlink:href="#shape2">bag</textPath></text>
         <text><textPath startOffset="230" xlink:href="#shape2">bag</textPath></text>
          <text><textPath startOffset="260" xlink:href="#shape2">bag</textPath></text>
         <text><textPath startOffset="290" xlink:href="#shape2">bag</textPath></text>
         <text><textPath startOffset="320" xlink:href="#shape2">bag</textPath></text>
          <text><textPath startOffset="360" xlink:href="#shape2">bag</textPath></text>
         <text><textPath startOffset="390" xlink:href="#shape2">bag</textPath></text>
         <text><textPath startOffset="420" xlink:href="#shape2">bag</textPath></text>
<text><textPath startOffset="450" xlink:href="#shape2">bag</textPath></text></svg>

推荐答案

No Need to use startOffset
Just Use this code

<svg xmlns="http://www.w3.org/2000/svg" width="550.156" height="658.647" viewBox="0 0 550.156 658.647">
  <path id="Ellipse_91"  d="M194,0C301.143,0,388,126.032,388,281.5S301.143,563,194,563,0,436.968,0,281.5,86.857,0,194,0Z" transform="matrix(0.946, -0.326, 0.326, 0.946, 0, 126.321)" fill="transparent" />



      <text>
      <textPath xlink:href="#Ellipse_91" class="svg_title">        
      bag  bag   bag  bag  bag  bag  bag  bag  bag  bag  bag  bag  bag  bag  bag  bag  bag  bag  bag  bag  bag  bag  bag  bag  bag  bag  bag  bag  bag  bag  bag  bag  bag  bag  bag  bag  bag  bag  bag  bag  bag  bag  bag  bag  bag  bag  bag  bag  bag  bag  bag  bag  bag  bag  bag  bag  bag  bag  bag  bag  bag
      </textPath>
    </text>
      </svg>

Javascript相关问答推荐

阻止iOS浏览器在传输摄像机视频时启用全屏摄像机模式

使用expressjs加载Nuxt版本=3.9.0(自定义服务器)

setFinder关闭模式并重定向到url

nPM审计始终发现0个漏洞

react 路由加载程序行为

使用TMS Web Core中的HTML模板中的参数调用过程

在JavaScript中声明自定义内置元素不起作用

为什么这个JS模块在TypeScript中使用默认属性导入?""

在Vite React库中添加子模块路径

如何从调整大小/zoom 的SVG路径定义新的d属性?""

如何从隐藏/显示中删除其中一个点击?

如何从Intl.DateTimeFormat中仅获取时区名称?

在使用HighChats时如何避免Datatables重新初始化错误?

Reaction Native中的范围滑块

当输入字段无效时,我的应用程序不会返回错误

使用auth.js保护API路由的Next.JS,FETCH()不起作用

try 将Redux工具包与MUI ToggleButtonGroup组件一起使用时出错

打字脚本中方括号符号属性访问和拾取实用程序的区别

警告框不显示包含HTML输入字段的总和

在GraphQL解析器中修改上下文值