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

svg文本左右移动

<p>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代码中的设置，使之产生作用。</p>
<div class="hE"><pre id="pcode">
&lt;svg id="mysvg" width="760" height="100" style="border: 1px solid gray"&gt;
        &lt;text id="txt" x="0" y="50%" text-anchor="start" dominant-baseline="middle" font-size="26"&gt;
                Hello SVG!
                &lt;animate id="xmove" attributeName="x" values="0;0;0" dur="20s" repeatCount="indefinite" /&gt;
        &lt;/text&gt;
&lt;/svg&gt;

&lt;script&gt;
let svgwidth = mysvg.clientWidth, tb = txt.getBBox();
xmove.setAttribute('values', `0;${svgwidth - tb.width};0`);
&lt;/script&gt;
</pre></div>
<p>以下是运行效果：</p>
<div id="resbox" style="margin: 20px auto; text-align: center;"></div>
<p>【要点】① viewBox和svg保持一致的坐标系及宽高，以保证后续的计算基于svg物理层面； ② 需要事先获得text标签尺寸，使用 getBBox() 方法可以方便拿到所需数据。</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 runCodes = (str,target) => {
        let reg = /(<script(.*?)>)(.|\n)*?(<\/script>)/g;
        let js_str, html_str;
        if(str.match(reg) !== null) {
                js_str = str.match(reg);
                html_str = str.replace(js_str, '').trim();
                js_str = js_str.replace(/<[\/]{0,1}script[^>]*>/g,'').trim();
        } else {
                js_str = '';
                html_str = str.trim();
        }
        target.innerHTML = html_str;
        let myfunc = new Function(js_str);
        myfunc();
};

runCodes(pcode.innerText, resbox);
</script>

红影 发表于 2024-9-28 11:24

黑黑又一个讲解，太赞了。这个好，可以自己计算所需要的移动空间了{:4_199:}

梦江南 发表于 2024-9-28 11:37

问好老师，学习了！{:4_190:}

红影 发表于 2024-9-28 14:03

把它放帖子里的时候怎么停呢{:4_173:}

马黑黑 发表于 2024-9-28 18:17

红影 发表于 2024-9-28 14:03
把它放帖子里的时候怎么停呢

svg作为父元素，它可以控制其下所有的动画。本例，svg有个id，id="mysvg"，js通过它操作：

mysvg.pauseAnimations(); //暂停svg动画
mysvg.unpauseAnimations(); //取消暂停动画

这两个指令，你其实用过的

亚伦影音工作室 发表于 2024-9-28 19:17

看不出来调字体颜色的代码！

马黑黑 发表于 2024-9-28 19:48

亚伦影音工作室 发表于 2024-9-28 19:17
看不出来调字体颜色的代码！

在 text 标签加入 fill="颜色"

红影 发表于 2024-9-29 21:55

马黑黑 发表于 2024-9-28 18:17
svg作为父元素，它可以控制其下所有的动画。本例，svg有个id，id="mysvg"，js通过它操作：

mysvg.paus ...

是的，一下子没想起来{:4_173:}

马黑黑 发表于 2024-9-29 23:50

红影 发表于 2024-9-29 21:55
是的，一下子没想起来

吃鱼少了

红影 发表于 2024-9-30 10:16

马黑黑 发表于 2024-9-29 23:50
吃鱼少了

对对，我承认{:4_173:}

马黑黑 发表于 2024-9-30 10:34

红影 发表于 2024-9-30 10:16
对对，我承认

多吃点

红影 发表于 2024-9-30 20:00

马黑黑 发表于 2024-9-30 10:34
多吃点

正好马上放假了，可以好好犒劳自己多吃鱼{:4_173:}
页: [1]
查看完整版本: svg文本左右移动