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

我有一条波浪形的道路需要延伸到屏幕上…它将用作在屏幕上滚动文本的文本路径。
理论上，要在屏幕宽度上产生一个正弦波，它应该简单到：

<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像素宽。
所以我决定在路径定义中加入角度表达式…（在调整大小时计算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、iphonesafari和ie edge的错误之处却各不相同。
注意：chrome显示错误：错误：属性d=“m 0 50 c{0.33*pvo contmain.innerwidth}0，{{.66*pvo contmain.innerwidth}100，{{1*pvo contmain.innerwidth}50的值无效”
注意：您可以在这里看到波浪：test page

最佳答案

afaik，带有{{}}的属性对于至少IE被认为是无效的html。所以使用ng-attr-*指令，它将计算插值{{}}的值并将其放入d属性中。

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