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

【问题标题】：How to use Angular expression in an svg path element's 'd' attribute如何在 svg 路径元素的“d”属性中使用 Angular 表达式
【发布时间】：2016-08-06 09:50:15
【问题描述】：

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

理论上，要在屏幕宽度上产生正弦波，应该很简单：

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

注意：你可以在这里看到波浪：test page

【问题讨论】：

标签： html angularjs svg

【解决方案1】：

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

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

【讨论】：

@dsdsdsdsd 很高兴知道这一点。谢谢 :=)