Ionic framework svg中rect的Ionic-for循环

我最近开始使用IONIC，所以我遇到的问题，对我来说很难用语言表达。请容忍我。 我正在尝试使用svg中的可点击矩形。我必须多次这样做，所以我没有将所有内容都放在HTML文件中，而是考虑使用一个外部JSON文件，其中包含带有x&y值和字符串的数组。这样我就可以保持HTML文件“干净”

无论如何，问题是，我想循环可单击矩形的rect元素。
这是包含数组的Json文件

[
    {"x": "375", "y": "7", "string": "steiger"},
    {"x": "459", "y": "60", "string": "kanaal"},
    {"x": "130", "y": "197", "string": "Westkolk"},
    {"x": "510", "y": "140", "string": "Sluizencomplex"},
    {"x": "492", "y": "237", "string": "wachthaven"},
    {"x": "510", "y": "285", "string": "autosteiger"},
    {"x": "578", "y": "335", "string": "Zwaaikom"},
    {"x": "505", "y": "630", "string": "Scheidingsboei"},
    {"x": "705", "y": "530", "string": "radartoren"},
    {"x": "925", "y": "350", "string": "Kilometerraai"},
    {"x": "880", "y": "295", "string": "schip"},
    {"x": "950", "y": "160", "string": "tunnel"}
]

这里是SVG的部分，我尝试循环矩形

<svg viewBox="0 0 1280 700">
<image width="1280" height="700" xlink:href="assets/imgs/maps/samenwerkenopdecorridor/opdracht1.svg">
</image>

<rect *ngFor="let item of coordinaten" x="{{item.x}}" y="7" width="200" height="45" fill="#fff" opacity="0.5" (click)="clickOnArea('Steiger')"
/>

我试图将*ngFor循环放在rect元素中，而不是放在X属性中

 Error: Template parse errors: Can't bind to 'x' since it isn't a known property of ':svg:rect'. (" </image> <rect *ngFor="let item of coordinaten" [ERROR ->]x="{{item.x}}" y="7" width="200" height="45" fill="#fff" opacity="0.5" (click)="clickOnArea('Steiger'"): ng:///AppModule/MapPage.html@49:43

错误：模板分析错误：无法绑定到“x”，因为它不是“：svg:rect”的已知属性。（“]x=“{item.x}}”y=“7”width=“200”height=“45”fill=“#fff”opacity=“0.5”（点击）=“点击区域（'Steiger'））：ng:///AppModule/MapPage。html@49:43

---

我遇到了这个错误。我试图在derect元素周围放置一个div，以将ngFor放入div中，但这也是错误的。如果有人知道解决方案，或者这是可能的话，请联系我们。这将是一个很大的帮助！

SVG需要在Angular 2+中进行特殊处理，请阅读以下内容：

现在，就你的例子来说，你应该这样做：

<svg viewBox="0 0 1280 700">
<svg:image width="1280" height="700" xlink:href="assets/imgs/maps/samenwerkenopdecorridor/opdracht1.svg">
</svg:image>

<svg:rect *ngFor="let item of coordinaten" [attr.x]="item.x" [attr.y]="7" width="200" height="45" fill="#fff" opacity="0.5" (click)="clickOnArea('Steiger')"
/>

基本上，除了主svg节点之外的任何东西都应该有“svg”预标记，并且所有属性绑定都应该有[attr.xyz]：

等