Back to Questions
2.0k
views4
comments
Load SVG File and Attach Events
websharper

Hi,

I am trying to load SVG files and attach events to specific elements. I have created this in javascript, but it accesses the SVG via the contentDocument object. I have tried D3 but cannot find any references to loading external SVG files. Does anyone have an idea how I may be able to load an SVG file and reference SVG elements?

The javascript code is:

1
2
3
4
5
6
7
8
9
10
11
12
13

//create the new object
    svgobj = document.createElement('object')
    svgobj.setAttribute('id', 'objSVG');
    svgobj.setAttribute('style', 'margin:auto;height:100%;width:100%;');
    svgobj.setAttribute('type', 'image/svg+xml');
    svgobj.setAttribute('data', screenfile);

    
    //set the screen up using a listener
    svgobj.addEventListener('load', function () {
        theSvgElement = svgobj.contentDocument.childNodes[1];
        //do stuff with the resolved SVG document
    }

... and my F# equivalent is...

1
2
3
4
5
6
7

let csvfile = "\path\to\example\file.svg"
let svgobj = Html.Default.Tags.Object[Attr.Type "image/svg+xml"; Attr.Class "svgobject"; Id "objSVG"]
svgobj.SetAttribute("data", csvfile )
svgobj |>! OnLoad (fun _ ->
    let theSvgElement = svgobj.ResolveContentDocument.childNodes(1)
   //do stuff with the resolved SVG document
)

Any advice would be greatly appreciated.

.

asd

By on 11/3/2014 7:09 AM ()

Access to contentDocument indeed seems to be missing, have you tried inlining it?

1
2
3
4
5
6
7
8

[<Inline "$el.contentDocument">]
let ContentDocumentOf (el: Element) : Dom.Document = Unchecked.defaultof<_>

svgobj |>! OnAfterRender (fun _ ->
    let theSvgElement = ContentDocumentOf(svgobj).ChildNodes.Item(1)
    //do stuff with the resolved SVG document
    ...
)
By on 10/28/2014 12:09 PM ()

hi Adam, Where can I read up on inlining? what is

1
2

[<Inline "$el.contentDocument">]
let ContentDocumentOf (el: Element) : Dom.Document = Unchecked.defaultof<_>

doing?

By on 11/23/2015 6:20 AM ()

Inlining turns .NET function calls into JavaScript code using an inlining "formula". For the above function and its inline, ContentDocumentOf e will yield e.contentDocument for all values of e.

Since you are supposed to call this function from client-side code, the .NET implementation of the function doesn't really matter, here you simply return a default value but could have raised an exception as well.

You can read about inlining and other aspects of working with client-side code in the "Working with JavaScript" section of the documentation, among others, here.

By on 11/23/2015 9:50 AM ()

    Topic tags

    IntelliFactory Offices Copyright (c) 2011-2012 IntelliFactory. All rights reserved.
    Home | Products | Consulting | Trainings | Blogs | Jobs | Contact Us | Terms of Use | Privacy Policy | Cookie Policy     		Built with WebSharper