我正在try 创建一个椭圆形的文本段落,我使用了SVG并设置了文本路径,还添加了起始偏移量,但问题是我无法估计段落的长度,如果段落的长度大于此值,那么文字将变得混乱
Here is the image where I show all the issues
- 我想要什么
- 我试过的
- 我面临的问题
当字长更大时,情况就更糟了.
我们可以根据字长动态设置起始偏移量吗.
<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>