I need to embed an SVG object in my HTML code using the following syntax:
<object id='mapObject' type="image/svg+xml" data="assets/maps/drawing.svg">
</object>
After embedding the SVG object, I want to access it from my TypeScript classes within Ionic 2:
let map = document.getElementById("mapObject");
let svgDoc = map.contentDocument; // Accessing the inner SVG DOM
Although this approach works well in a browser environment, TypeScript raises an error:
TypeScript Property 'contentDocument' does not exist on type 'HTMLElement'
The real issue arises when this code is deployed on a device, as the compiler refuses to generate the necessary code for it.
To overcome this problem, I have come up with a temporary solution by performing a type casting:
let svgDoc = (<HTMLIFrameElement>map).contentDocument; // Obtaining the inner SVG DOM
This fix enables the code to work on devices because HTMLIFrameElement includes the contentDocument property. However, I find it odd that TypeScript does not provide a specific type for this scenario. I have searched extensively but have yet to find a suitable solution.
Any suggestions or insights would be greatly appreciated!