Question

我将dwg文件转换为svg文件。现在这个svg文件我把它导入了一个html文件。

<ion-scroll scrollX="false"  scrollY="true" zoom="true" maxZoom="10"> 
     <object id="svg1" data="assets/svgs/file.svg" type="image/svg+xml" style="width:400%;"></object>
  </ion-scroll>

在矩形的svg文件中，我把它放在：

onclick="btnClicked();"
<g id="P2" onclick="btnEvent($event)">

问题在于，点击有效但功能btnClicked()已经有效。它给了我这个错误（在控制台中）

Uncaught ReferenceError: btnClicked is not defined
    at SVGGElement.onclick (file.svg:2946)

好像我必须检查这个对象是否已加载并调用该函数？像这样的东西？

var elementExists = document.getElementById("svg1");

svg1是对象的id，如果我检查它是否填充了它将运行的svg？无论如何这是js我会在ts。

抱歉我的英文。

更新

当页面准备好后，我必须进入svg并听取以PI开头并捕获点击的所有ID。 svgDwg是对象的id。现在我无法进入内部，svg在哪里。 a.contentDocument投放了。

ionViewDidLoad() {
    var a = document.getElementById("svgDwg");
    console.log(a);

  }

Answer 1

我找到了答案：

如果你想在你的离子页面中导入一个file.svg，不使用像onclick这样的函数但是在jquery中使用类似监听器（.on('click',...）的东西，你可以使用jquery和{{3}的组合}

在.ts离子页面中安装第一个jquery并导入：

$ npm install jquery --save
import * as $ from 'jquery'

然后安装插件angular-svg-icon： angular-svg-icon

在你的html中导入你的file.svg：

<svg-icon src="path/to/file.svg"></svg-icon>

然后在离子的 ionViewDidEnter（）函数中为你的file.svg写一些.ts和jquery

这对我有用（经过2天的研究）

使用ts函数加载SVG文件IONIC 3

1 个答案: