2016-04-01 11 views
2

私はAureliaアプリケーションで米国のSVGマップを使用しています。私は状態のリストを反復し、repeat.forのパスを設定することができるようにしたいと思います。これはChromeとFirefoxではうまくいきますが、IE11でエラーが発生して悲惨に失敗します:Aurelia repeat.forで指定されているとSVGパスが機能しない

SVG4601:SVGパスデータの形式が正しくないため、完全に解析できませんでした。オーレリアもIE11で「D」プロパティをバインドしようとしていないようです

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> 

は私がでPlunkerで設定例を持っています。

ありがとうございました!

+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個があります): Jereme

答えて

1

使用d.bind="state.path"

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

インターネットエクスプローラは、それが許可されていないd attribute- ${...}にできますかについて厳しいです:

error

お知らせエラーとd属性IEがHTMLを解析した後は空です^^^。

Aureliaがテンプレートをコンパイルするまでに、d属性がIEのhtml解析ロジックによってクリアされました。

関連する問題