如何在svg路径元素的'd'属性中使用Angular表达式

Question

我有一个需要在屏幕上伸展的波浪形路径...它将用作文本在屏幕上滚动的文本路径.

理论上,要在屏幕宽度上产生一个sin波,它应该像下面这样简单:

<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的值无效="M 0 50 C {{0.33*pvo_contMain.innerWidth}} 0,{{.66*pvo_contMain.innerWidth}} 100,{{1*pvo_contMain.innerWidth} 50"

注意:您可以在此处查看wave:测试页面

Answer 1

AFAIK,属性{{}}被认为是至少无效的HTML IE.所以使用ng-attr-*指令,它将评估插值的值{{}}并将其放在d属性中.

ng-attr-d="{{'M 0 50 C '+0.33*innerWidth+ '0, '+.66*innerWidth+' 100,'+ 1*innerWidth+' 50'}}"