score:0

find my solution below. The idea with the onAfterRendering is taken from SCN.

Alternatively you may consider to use a sap.m.Image. According to CSS Tricks, an <img> tag should be sufficient to display SVG from an external source. However, in my case it didn't work; I suspect the reason was that my service URL doesn't return an adequate MIME type (is: application/xml, should: image/svg+xml???)

return Control.extend("com.example.SvgDisplay", {
    metadata : {
        properties: {
            svgID: "string",
            mySvg: "object"
        }
    },

    setSvgID: function(sSvgID) {
        var that = this,
            sParams;

        this.setProperty("svgID", sSvgID, true);
        if (sSvgID) {
            sParams = $.sap.encodeURLParameters({ id: sSvgID });

            d3.xml("/my/svg/service?" + sParams, function (oError, oDocument) {
                var oSvgNode;

                if (oError) {
                    // Do error handling - for example evaluate oError.responseText
                } else if (oDocument) {
                    oSvgNode = oDocument.lastChild;
                }
                that.setMySvg(oSvgNode); // may still be undefined; force re-rendering
            });
        }
    },

    // "static" function, renders the basic <div> tag. The rest will be done by method onAfterRendering
    renderer : function(oRm, oControl) {
        var sId     = oControl.getId(),
            oMySvg  = oControl.getMySvg();

        oRm.write("<div");              // Control - DIV
        oRm.writeControlData(oControl); // writes the Control ID and enables event handling - important!
        oRm.writeClasses();
        oRm.write('><div id="' + sId + '-svgContainer"></div>');
        oRm.write("</div>");          // end Control - DIV
    },

    onAfterRendering: function(){
        var oMySvg = this.getMySvg(), sDomID, oVis;

        if (oMySvg) {
            sDomID = this.getId();
            oVis   = d3.select("#" + sDomID + "-svgContainer").node();
            oVis.appendChild(oMySvg);
        }
    }
});

score:1

It's possible to load an external SVG with D3, but it's not built-in. Here's an example (the footballs are external SVG icons):

http://bl.ocks.org/emeeks/a347eed5c50a7f1cf08a

However, this is not what D3 is built for. Rather, D3 is built for creating complex SVG graphics based on data. You're better off either using native Javascript (which is mostly what is done in that example, anyway, loading the element on a documentFragment and then cloning the node) or another library. You might want to look at snap.svg, since it's more focused on traditional SVG manipulation.


Related Query