svg文本左右移动

马黑黑 · 发表于 2024-9-28 10:44

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

svg实现文本左右移动非常容易：使用 animate 标签持续改变text标签的 x 属性值即可。问题在于如何确定边界：当viewBox和svg坐标及物理宽高一致（默认）则左边界是0，右边界则需要需要获知文本标签长度。svg不提供计算元素尺寸的方法，需要借助JS来获取text标签的宽度，最简单的方法是使用基于svg子元素的getBBox API，svgElement.getBBox() 将返回一个基于svg元素的矩形对象，该对象的 width 和 height 是宽高值。以下演示，JS代码中我们先获取svg标签的宽度和text标签的宽度，后者就是使用 getBBox() 方法拿到文本元素的宽度值，svg的宽度减去文本元素的宽度就是右边界；然后，设置动画标签的 values 值覆盖原先在svg代码中的设置，使之产生作用。

<svg id="mysvg" width="760" height="100" style="border: 1px solid gray">
	<text id="txt" x="0" y="50%" text-anchor="start" dominant-baseline="middle" font-size="26">
		Hello SVG!
		<animate id="xmove" attributeName="x" values="0;0;0" dur="20s" repeatCount="indefinite" />
	</text>
</svg>

<script>
let svgwidth = mysvg.clientWidth, tb = txt.getBBox();
xmove.setAttribute('values', `0;${svgwidth - tb.width};0`);
</script>

以下是运行效果：

【要点】① viewBox和svg保持一致的坐标系及宽高，以保证后续的计算基于svg物理层面； ② 需要事先获得text标签尺寸，使用 getBBox() 方法可以方便拿到所需数据。