如何在SVG路径元素的“d”属性中使用Angular表达式

3

我需要一个波浪形路径,它需要横跨整个屏幕...它将被用作文本在屏幕上滚动的路径。

理论上,要在屏幕宽度上生成正弦波,只需简单地执行以下操作:

<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"无效 请注意,在此处可以查看波浪效果:测试页面
1个回答

10
AFAIK,使用{{}}属性在至少IE中被认为是无效的HTML。因此,请使用ng-attr-*指令,它将评估插值 {{}} 的值并将其放置在d属性中。
ng-attr-d="{{'M 0 50 C '+0.33*innerWidth+ '0, '+.66*innerWidth+' 100,'+ 1*innerWidth+' 50'}}"

@dsdsdsdsd 很高兴知道这个消息。感谢 :=) - Pankaj Parkar

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接