2016-04-01 2 views
2

Я использую карту SVG в Соединенных Штатах в приложении Aurelia. Я хотел бы иметь возможность перебирать список состояний и задавать путь в repeat.for. Это отлично работает в Chrome и Firefox, но в IE11 с ошибкой не получается:Пути SVG не работают, если указано в Aurelia repeat.for

SVG4601: данные SVG Path имеют неправильный формат и не могут быть полностью проанализированы.

У меня есть пример создать в Plunker на:

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> 

Кажется, что Аурелия даже не пытается связать свойство «D» в IE11.

Любая помощь ценится!

+0

Можете ли вы показать, что делает в DOM? Есть ли другой результат в Chrome? –

+0

В Chrome и Firefox путь задан правильно: d = "M 471.87905,128.47084 L 471.4218,120.0118 L ....." В Internet Explorer d = "" ... поэтому он ничего не делает. Я связал его с вызовом функции с console.log вчера, и Chrome и Firefox оба выписали ожидаемый материал. В IE функция никогда не вызывалась. – Jereme

+0

Представленный элемент пути в IE (из них 48, с разными именами состояний): <путь xmlns = "http://www.w3.org/2000/svg" class = "au-target" id = " VA "d =" "au-target-id =" 1 "/> – Jereme

ответ

1

Использование d.bind="state.path"

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

исследователя интернета строго о том, что она позволяет в d attribute- ${...} не допускается:

error

Уведомление об ошибке и атрибут d пуст ^^^ после IE анализирует HTML.

К тому времени, когда Aurelia компилирует ваш шаблон, атрибут d был очищен логикой синтаксического анализа IE в html.