在 Aurelia 中指定时 SVG 路径不起作用 repeat.for

Question

我在 Aurelia 应用程序中使用美国的 SVG 地图。我希望能够遍历状态列表并在 repeat.for 中设置路径。这在 Chrome 和 Firefox 中工作得很好，但在 IE11 中失败并出现错误：

SVG4601：SVG 路径数据格式不正确，无法完全解析。

我在 Plunker 中设置了一个示例：

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

似乎 Aurelia 甚至没有尝试在 IE11 中绑定 "d" 属性。

感谢任何帮助！

Answer 1

使用d.bind="state.path"

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

Internet Explorer 对其在 d 属性中允许的内容非常严格 - ${...} 是不允许的：

注意错误，IE 解析 HTML.

后 d 属性为空 ^^^

当 Aurelia 编译您的模板时，d 属性已被 IE 的 html 解析逻辑清除。

在 Aurelia 中指定时 SVG 路径不起作用 repeat.for

SVG paths not working when specified in Aurelia repeat.for

javascript

svg

internet-explorer-11

aurelia