我需要一个波浪形路径,它需要横跨整个屏幕...它将被用作文本在屏幕上滚动的路径。
理论上,要在屏幕宽度上生成正弦波,只需简单地执行以下操作:
<div style = "position:absolute;height:3%;width:100%;top:10%;left:0;">
<svg width='100%' height='100%' viewBox="0 0 100 100">
<path d = "M 0 50 C 33 0, 66 100, 100 50" >
</svg>
</div>
但这只给我一个非常短的波浪...我猜它只有100个像素宽。
因此,我决定将Angular表达式添加到路径定义中...(innerWidth
在调整大小期间计算):
<path id = "text_path"
d = "M 0 50 C {{0.33*innerWidth}} 0, {{.66*innerWidth}} 100, {{1*innerWidth}} 50"
/>
在Firefox、Chrome、Opera35中,这个波浪效果非常好。但是在iPad Safari、iPhone Safari和IE Edge中,结果会有所不同。
注意:Chrome会显示错误:错误:属性值d="{{0.33*pvo_contMain.innerWidth}} 0, {{.66*pvo_contMain.innerWidth}} 100, {{1*pvo_contMain.innerWidth}} 50"无效 请注意,在此处可以查看波浪效果:测试页面。