svg : textPath 文本定位
<p>在svg里，text元素可以内嵌 textPath 标签令文本沿着指定路径布局。我们需要事先用 defs 标签定义所需路径并给路径指定 id 以便将来引用。在text标签里，要呈现的文本应该放在 textPath 标签内。textPath 标签首先用 href="#路径id"（建议）或 xlink:href="#路径id" 指明要引用的路径，然后使用 textPath 专有属性 startOffset（开始偏移量）定位文本。以下演示，我们用use标签实例化路径出于方便观察效果：<br><br></p><!-- textPath 文本定位-->
<svg style="width: 400px; height: 200px; border: 1px solid gray;">
<defs>
<path id="tpath" d="M0 60 Q100 200,200 60" />
</defs>
<use xlink:href="#tpath" fill="none" stroke="gray" stroke-dasharray="2"></use>
<text fill="purple" stroke="none" text-anchor="middle" dominant-baseline="middle" font-size="30">
<textPath href="#tpath" startOffset="50%">Hello SVG!</textPath>
</text>
</svg>
<p><br>代码：</p>
<div class="hE"><pre id="svgcode"></pre></div>
<p>需要注意的是，文本置入textPath之后，文本的坐标系会跟随路径的坐标系，有可能因为路径的弯曲程度造成文本被挤压等现象，若此，可以考虑给textPath加入一个 textLength 属性，调整其值到合适的尺寸，例如，以上面的演示示例为例，可以这样：textLength="180"。</p>
<script>
var sc = document.createElement('script');
sc.chartset = 'utf-8';
sc.src = 'https://638183.freep.cn/638183/web/helight/helight.js';
document.body.appendChild(sc);
var outstr = document.querySelector('svg').outerHTML;
outstr = outstr.replaceAll('<', '<');
outstr = outstr.replaceAll('>', '>');
svgcode.innerHTML = outstr;
</script> 有意思，可以让文字弯曲，而且黑黑还弄了个参照线，让这个演示更清楚{:4_199:} 这样还可以让文本沿着曲线前行吧，很奇妙的功能{:4_199:} 去试了一下，textLength要加得挺大才能把文字拉开来啊，开始试了个10，结果反倒把文字挤一起了{:4_173:}
<svg style="width: 400px; height: 200px; border: 1px solid gray;">
<defs>
<path id="ttpath" d="M0 60 Q100 200,200 60"></path>
</defs>
<use xlink:href="#ttpath" fill="none" stroke="gray" stroke-dasharray="2"></use>
<text fill="purple" stroke="none" text-anchor="middle" dominant-baseline="middle" font-size="30" textLength="240">
<textPath href="#ttpath" startOffset="50%">Hello SVG!</textPath>
</text>
</svg> 跟着黑黑老师学习代码。{:4_187:}
页:
[1]