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 - 缩放 css 用于正文后平滑滚动不起作用

javascript - 通过 jQuery 激活类冲突

javascript - 预加载器 v-cloak 不显示文本加载

css - 使 HTML5 视频海报与视频本身大小相同

html - 弹出框不会停留,页面滚动时位置会停留(Angular 4+)

javascript - 带有图像 slider 的 Div 仅在 Safari 中不继承高度

html - 如何在文本中设置div?

php - 用数组填充 HTML 表并创建链接

javascript - 自下而上的 jQuery Masonry

jquery - 在 mixitup jquery 中为图像添加字幕