javascript - 如何使用 JS 根据 SVG <text><textPath> 中的总字数查找 startOffset 并动态替换

标签 javascript html css

我正在尝试创建一个椭圆形文本段落,我使用了 SVG 并设置了文本路径,并添加了起始偏移量,但问题是我无法估计段落的长度以及段落的长度越大的话单词就会困惑

这是我显示所有问题的图片 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>

最佳答案

无需使用startOffset
只需使用此代码

<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 - 如何使用 JS 根据 SVG <text><textPath> 中的总字数查找 startOffset 并动态替换,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/71478063/

相关文章:

javascript - 使用 javascript/jquery 闭包在 ul >li 层次结构中级联值

javascript - Tic Tac Toe 游戏结束后禁用按钮

javascript - 为什么使用这个resolve.alias配置时Webpack会抛出错误?

javascript - 使用 javascript 打印另一个 HTML 页面 :window. print

javascript - 一些 Jquery 中的错误

javascript - 用于动态创建组件的 React v4 路由

2 个不同范围的 CSS 媒体查询

CSS3 -webkit-keyframe 动画在 safari for windows 中不起作用

javascript - 获取图像宽度的最早事件

html - html 文件路径前的 ./(点斜线)与没有它的文件路径有什么区别?