svgパス要素の 'd'属性で角度式を使用する方法

Question

私は波状のパスを画面全体に広げなければなりません...スクリーン全体のテキストスクロールのテキストパスとして使用されます。画面の幅を横切って正弦波を生成するために、理論的には

、それはのように単純でなければなりません：

<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> 

しかし、これは私だけに非常に非常に短い波を与える...私は1つのことを推測しますわずか100ピクセルです。

---

は、だから私は（innerWidthがリサイズ中に計算される）...パス定義に角度の表現を追加することにしました：Firefoxの、クロム、Opera35で

<path id = "text_path"   
      d = "M 0 50 C {{0.33*innerWidth}} 0, {{.66*innerWidth}} 100, {{1*innerWidth}} 50" 
    /> 

、これは素晴らしい作品：波それは適切に伸びる。しかし、Ipad Safari、Iphone Safari、IE Edgeの結果は、それぞれの違いが異なります。

注：エラー：クロムエラー表示属性Dの無効な値=「M 0 50 C {{0.33 * pvo_contMain.innerWidth}} 0 {{0.66 * pvo_contMain.innerWidth}} 100 { {1 * pvo_contMain.innerWidth}} 50"

注：あなたがここに波見ることができます：test page

Answer 1

私の知る限りを、{{}}と属性は、少なくともIEのために無効なHTMLなるように考えられています。したがって、ng-attr-*ディレクティブを使用して、補間値{{}}を評価し、d属性内に配置します。

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