CODEWITHSUNDEEP
javascriptsvginternet-explorer-11aurelia
Jereme
Jereme

Reputation: 1485

SVG paths not working when specified in Aurelia repeat.for

I am using an SVG map of the united states in an Aurelia application. I would like to be able to iterate over a list of states and set the path in a repeat.for. This is working just fine in Chrome and Firefox, but fails miserably in IE11 with an error:

SVG4601: SVG Path data has incorrect format and could not be completely parsed.

I have an example set up in a Plunker at:

http://plnkr.co/edit/UpxgfS?p=preview

<template>
    <div class="map">
        <svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://web.resource.org/cc/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
        xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 959 593" preserveAspectRatio="xMidYMid slice"
        id="us-map">
            <g>
                <path repeat.for="state of states" id="${state.name}" d="${state.path}"></path>
            </g>
        </svg>
    </div>
</template>

It seems that Aurelia isn't even trying to bind the "d" property in IE11.

Any and all help appreciated!

Upvotes: 2

Views: 436

Answers (1)

Jeremy Danyow
Jeremy Danyow

Reputation: 26406

Use d.bind="state.path"

http://plnkr.co/edit/OVIe2dKxTKrDPDEmIU2a?p=preview

Internet explorer is strict about what it allows in the d attribute- ${...} isn't allowed:

error

Notice the error and the d attribute is empty ^^^ after IE parses the HTML.

By the time Aurelia compiles your template the d attribute has been cleared by the IE's html parsing logic.

Upvotes: 1

Related Questions