离子 - 缩放内联SVG元素

Question

我有一个带有内联SVG地图的离子应用程序（由于SVG中提供了功能，因此必须内联）。

我可以发布所有SVG代码，但由于它是1000条规则，我认为这有点多了......这就是我所拥有的：

<ion-header>
    <ion-navbar color='primary'>
        <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
        <ion-title>Plattegrond</ion-title>
        <ion-buttons end>
            <button ion-button icon-only (click)="openPopover($event)">
        <ion-icon name="more"></ion-icon>
      </button>
        </ion-buttons>
    </ion-navbar>
</ion-header>

<ion-content style="background-color: #000;">
    <ion-scroll zooming="true" direction="xy">
         <svg>
             //svg element
         </svg>
    </ion-scroll>
</ion-content>

结果是这个SVG元素：

出于某种原因，我无法使用这段代码放大SVG元素，这应该可以正常工作..

Answer 1

检查ion-scroll API。

您设置了错误的属性：

<ion-content style="background-color: #000;">
    <ion-scroll zoom="true" scrollX="true" scrollY="true">
         <svg>
             //svg element
         </svg>
    </ion-scroll>
</ion-content>