Question

我最近开始使用IONIC，所以我遇到的问题是很难用语言表达。请多多包涵。我正在尝试使用可点击矩形内的svg。我必须多次执行此操作，因此我考虑使用外部JSON文件，而不是将所有内容都放在HTML文件中，因为它是带有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

我收到此错误。我试图在def元素周围放置一个div，以便将ngFor放入div中，但这也是错误的。请问是否有人知道解决方案，或者即使可能的话。那将是很大的帮助！

Answer 1

SVG在Angular 2+中需要特殊处理，请在此处阅读更多信息：https://teropa.info/blog/2016/12/12/graphics-in-angular-2.html

现在以您的示例为例，您应该执行以下操作：

<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]： <svg:path [attr.xyz]=""></svg:path>等

离子-SVG

1 个答案: