Not possible to load SVG file content into a div element correctly

QuatschSalat commented 11 years ago

Hi,

I'm trying to load the content of a SVG file into a div element. Although the content is loaded, the height of the SVG is always "null". Here is the HTML code I'm using:

<html>
<head>
    <title>Load SVG files with JavaScript</title>

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.js"></script>
    <script type="text/javascript" src="http://keith-wood.name/js/svg.js"></script>
    <script type="text/javascript" src="http://keith-wood.name/js/jquery.svg.js"></script>
    <script type="text/javascript" src="http://keith-wood.name/js/jquery.svganim.js"></script>
    <script type="text/javascript" src="http://keith-wood.name/js/jquery.svgdom.js"></script>
    <script type="text/javascript" src="http://keith-wood.name/js/jquery.svgfilter.js"></script>
    <script type="text/javascript" src="http://keith-wood.name/js/jquery.svggraph.js"></script>
    <script type="text/javascript" src="http://keith-wood.name/js/jquery.svgplot.js"></script>

    <script type="text/javascript">
        $(document).ready(function() {
            $('#svgfile').svg({loadURL: 'lion.svg'});
        });
    </script>

</head>
<body>
    <div id="svgfile"></div>
</body>
</html>

The file "lion.svg" is located in the same directory as the HTML file. I've already tried it with different versions of jQuery. Without success.

The generated content looks like this:

<div id="svgfile" class="hasSVG">
  <svg version="1.1" width="1664" height="null">
    <g transform="translate(100,10)">...</g>
  </svg>
</div>

If I set a value of 500 for the height in the web inspector, my SVG graphic is displayed. Here's the error message in Safari: Error: Invalid value for <svg> attribute height="null"

container.clientHeightin "jquery.svg.js" line 104 is always zero.

if (container.clientHeight > 0) {
    svg.setAttribute('height', container.clientHeight);
}

kbwood commented 11 years ago

You need to assign a size to your container div:

<div id="svgfile" style="width: 500px; height: 400px;"></div>

QuatschSalat commented 11 years ago

OK, cool. This has solved my problem. Thank you. Is there a way to set the height of the container depending on the height of the SVG graphic?

klodeckl commented 11 years ago

Did you solve that problem? I have the same problem. Only in webkit based browsers, in Firefox it works fine. Assigning a fixed height solves it, but I need it in a variable size.

gorgar99 commented 10 years ago

I was trying to find the height and width of the externally loaded svg. My container div is completely blank. I added the callback handler "svgLoaded" to the original call:

$("#containerDiv").svg({loadURL: 'yourExternalSVGFile.svg', changeSize: true, onLoad: svgLoaded});

I then went to the DOM & got the first child of the container Div, using the function "getFirstChild" below to weed out text nodes:

    function svgLoaded(e) {
        var theContainerDiv = document.getElementById("containerDiv");
        var theSVG = getFirstChild(theContainerDiv);
        var theWidth = theSVG.width.baseVal.valueAsString;
        var theHeight = theSVG.height.baseVal.valueAsString; 
        // I set the container's dimensions to the child's dimensions - not necessary
        //theContainerDiv.style.width = theWidth + "px";
        //theContainerDiv.style.height = theHeight + "px";
    }

    function getFirstChild(el){
        var firstChild = el.firstChild;
        while(firstChild != null && firstChild.nodeType == 3){ // skip TextNodes
            firstChild = firstChild.nextSibling;
        }
      return firstChild;
    }

[These internals of these functions could have been done using more JQuery-style calls.]

For my use, this is in a template that gets reused. I have to "clean house" in the div at load time to make this work. I am also going to going to center & scale the child up to the div's dimensions, subject to internal padding restraints.

kbwood / svg

Not possible to load SVG file content into a div element correctly #7