2016-04-01 3 views
2

Ich verwende eine SVG-Karte der Vereinigten Staaten in einer Aurelia-Anwendung. Ich würde gerne in der Lage sein, über eine Liste von Zuständen zu iterieren und den Pfad in einer Wiederholung zu setzen. Dies funktioniert in Chrome und Firefox einwandfrei, schlägt aber in IE11 mit einem Fehler kläglich fehl:SVG-Pfade funktionieren nicht, wenn in Aurelia für

SVG4601: SVG Pfaddaten haben ein falsches Format und konnten nicht vollständig geparst werden.

Ich habe ein Beispiel, in einem Plunker eingerichtet unter:

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> 

Es scheint, dass Aurelia nicht einmal versucht, die "d" Eigenschaft in IE11 zu binden.

Alle und alle Hilfe geschätzt!

+0

Können Sie zeigen, was im DOM rendert? Gibt es in Chrome ein anderes Ergebnis? –

+0

In Chrome und Firefox ist der Pfad korrekt eingestellt: d = "M 471.87905,128.47084 L 471.4218.120.0118 L ....." Im Internet Explorer d = "" ... also wird dort nichts gerendert. Ich habe es gestern mit einem console.log an einen Funktionsaufruf gebunden, und Chrome und Firefox schrieben beide das erwartete Zeug. In IE wurde die Funktion nie aufgerufen. – Jereme

+0

Das gerenderte Pfadelement in IE (es gibt 48 davon mit unterschiedlichen Zustandsnamen): Jereme

Antwort

1

Verwenden d.bind="state.path"

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

Internet Explorer ist streng darüber, was es ermöglicht, in der d Attribut- ${...} nicht erlaubt ist:

error

Hinweis der Fehler und das Attribut d ist leer ^^^ nachdem IE den HTML-Code analysiert hat.

Zu der Zeit, Aurelia kompiliert Ihre Vorlage das d Attribut wurde von der IE-HTML-Parsing-Logik gelöscht.

Verwandte Themen