CODEWITHSUNDEEP
javascriptinternet-explorersvgpolymer
Pete Kozak
Pete Kozak

Reputation: 623

Polymer, SVG path, Internet Explorer

Inside an svg element (which is inside my Polymer element) I have the following code:

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

which results in the following in IE (note the empty d attribute):

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

The d attribute is populated correctly in Firefox, Opera, and Chrome, just not in IE.

This is a continuation of the following topic: Flatten points into SVG polyline Polymer

I know it's a pretty new area and IE is not a first choice testing browser for the Polymer guys, but if anyone has come across this weird behavior and found a solution (or at least a good kludge) that would be perfect!

Upvotes: 2

Views: 454

Answers (1)

CletusW
CletusW

Reputation: 3980

IE deletes the invalid d attribute value before Polymer has a chance to read it and parse out the data bindings. As a workaround, you can prepend an attribute with an underscore and Polymer will create the real attribute with valid data after loading.

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

becomes

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

Upvotes: 2

Related Questions