javascript - Polymer、SVG 路径、Internet Explorer

Question

在 svg 元素内(在我的 Polymer 元素内)我有以下代码:

<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}})"/>

这会在 IE 中产生以下结果(注意空的 d 属性):

<path xmlns="http://www.w3.org/2000/svg" 
id="zone" 
fill="url(#crossHatch260320416)" 
d="" 
touch-action="none" 
on-track="{{ trackAction }}" 
t="M 345 277  L345 277 L649 277 L649 442 L345 442  L345 277 " />

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

这是以下主题的延续: Flatten points into SVG polyline Polymer

我知道这是一个相当新的领域，IE 不是 Polymer 人员的首选测试浏览器，但如果有人遇到过这种奇怪的行为并找到了一个解决方案(或至少是一个好的解决方案)，那将是完美的!

Answer 1

IE 在 Polymer 有机会读取并解析数据绑定(bind)之前删除无效的 d 属性值。作为解决方法，您可以在属性前添加下划线，Polymer 将在加载后创建具有有效数据的真实属性。

<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)}}"/>