Is it possible to get a ref to a dynamically loaded SVG?

I'm trying to manipulate elements within the dynamically loaded SVG.

Previously I was doing this by importing my svg as a Component, assigning it a ref, then later on, retrieving it by the ref and manipulating child elements within the svg. Something like this:

import { ReactComponent as MySvg} from './my-svg.svg';
import * as d3 from 'd3'

export class SvgDemo extends React.Component {
    constructor(props) {
        super(props);
        this.state = { };
    }

    render() {
        return (<MySvg ref="mySvgRef" />)
    }

    componentDidMount() {        
        var mySvg= d3.select(this.refs.mySvgRef);

        // Manipulate svg components
        // ...
        // ...
    }
}

I was attempting to add 'react-svg-pan-zoom' into the mix by following the example here: https://github.com/chrvadala/react-svg-pan-zoom/blob/master/docs/svg-dynamically-loaded.md

But I can't seem to get at the contents of the loaded svg to manipulate them.

Any help would be really appreciated!

chrvadala / react-svg-pan-zoom

Is it possible to get a ref to a dynamically loaded SVG? #171