Javascript 聚合物、SVG路径、Internet Explorer

在

svg

元素中（在我的聚合元素中），我有以下代码：

<path
id="zone"
on-track="{{trackAction}}"
touch-action="none"
t="M {{points[0].x| max(correctWidth)}} {{points[0].y | max(correctHeight)}}  {{points | toSvgPoints2(correctWidth, correctHeight)}} {{points | polygonPoint(correctWidth, correctHeight)}}"
d="M {{points[0].x| max(correctWidth)}} {{points[0].y | max(correctHeight)}}  {{points | toSvgPoints2(correctWidth, correctHeight)}} {{points | polygonPoint(correctWidth, correctHeight)}}"
fill="url(#crossHatch{{index}})"/>

d

属性在Firefox、Opera和Chrome中正确填充，而不是在IE中

这是以下主题的延续：

---

我知道这是一个非常新的领域，IE并不是聚合物人的首选测试浏览器，但是如果有人遇到这种奇怪的行为并找到了一个解决方案（或者至少是一个好的乱七八糟的解决方案），那将是完美的

IE在Polymer有机会读取并解析数据绑定之前删除无效的

d

属性值。作为一种解决方法，可以在属性前面加下划线，加载后将使用有效数据创建真实属性

<path _d="M {{points[0].x| max(correctWidth)}} {{points[0].y | max(correctHeight)}}  {{points | toSvgPoints2(correctWidth, correctHeight)}} {{points | polygonPoint(correctWidth, correctHeight)}}"/>

变成

<path d="M 345 277  L345 277 L649 277 L649 442 L345 442  L345 277" _d="M {{points[0].x| max(correctWidth)}} {{points[0].y | max(correctHeight)}}  {{points | toSvgPoints2(correctWidth, correctHeight)}} {{points | polygonPoint(correctWidth, correctHeight)}}"/>

我没有IE，但是这个jsbin会复制这个bug吗？这是正确的，使用附带的jsbin示例，我们可以看到它在除IE之外的所有浏览器中都正确地绘制了一个矩形，一旦我们将“d”修改为“\u d”，它甚至在IE中也正确地绘制了一个矩形。再次感谢。非常感谢！这是一个正确的解决方案！你让我开心了：）我还认为这是一个更通用的解决方案，只是遇到了另一个属性“value”，并且在它前面又加了一个下划线。

<path d="M 345 277  L345 277 L649 277 L649 442 L345 442  L345 277" _d="M {{points[0].x| max(correctWidth)}} {{points[0].y | max(correctHeight)}}  {{points | toSvgPoints2(correctWidth, correctHeight)}} {{points | polygonPoint(correctWidth, correctHeight)}}"/>