Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
QuatschSalat opened this issue Dec 11, 2012 · 4 comments
Open

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

QuatschSalat opened this issue Dec 11, 2012 · 4 comments

Comments

@QuatschSalat
Copy link

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
Copy link
Owner

kbwood commented Dec 12, 2012

You need to assign a size to your container div:

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

@QuatschSalat
Copy link
Author

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
Copy link

klodeckl commented Sep 2, 2013

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
Copy link

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@kbwood @klodeckl @QuatschSalat @gorgar99