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

Question

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

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

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

Aurelia 似乎甚至没有尝试在 IE11 中绑定(bind)“d”属性。

感谢所有帮助!

Answer 1

使用d.bind="state.path"

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

Internet Explorer 对它在 d 属性中允许的内容很严格 - ${...} 是不允许的:

请注意错误，在 IE 解析 HTML 后 d 属性为空 ^^^。

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