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

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>

但这只会给我一个非常非常短的波浪……我猜只有 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 中，这非常有效:一个可以适当拉伸(stretch)的波浪。但 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"

注意:您可以在此处看到波浪: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'}}"