Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Jul 2007
    Location
    Netherlands
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    No closing tag adding <image> to SVG with Javascript

    I'm trying to create a SVG-image using javascript. This works fine except when I want to add an image to the SVG. I've written tehe following code to add an image:
    Code:
            var svgNamespace = 'http://www.w3.org/2000/svg';
      	var svgXlink = 'http://www.w3.org/1999/xlink';
    	var xmlNamespace = 'http://www.w3.org/XML/1998/namespace';
    	
            // get the canvas div
            var container = document.getElementById(elem);
    	
            // create the SVG
    	var svg = container.ownerDocument.createElementNS(svgNamespace, "svg");
    	svg.setAttributeNS(null, 'width', '700px');
      	svg.setAttributeNS(null, 'height', '500px');
      	svg.setAttributeNS(null, 'id', 'svg');
    
            // create the image-element
            var img = svg.ownerDocument.createElementNS(svgNamespace, 'image');
      	img.setAttributeNS(svgXlink, 'xlink:href', "http://www.site.com/image.jpg");
      	
      	svg.appendChild(img);	  
    	container.appendChild(svg);
    
            alert(container.innerHTML);
    The problem is that javascript won't add the closing tag </image> or make it selfclosing like <image />. This makes it unviewable by an SVG-viewer. I've tried many things with different namespaces etc., all without any success.

    Does someone have a solution for this?

  • #2
    jkd
    jkd is offline
    Senior Coder jkd's Avatar
    Join Date
    May 2002
    Location
    metro DC
    Posts
    3,163
    Thanks
    1
    Thanked 18 Times in 18 Posts
    You are using the innerHTML property... it does not necessarily reflect the actual DOM representation (as it is an HTML-serialization of the DOM). The DOM methods you are using would work fine if the viewer supported the image element.

  • #3
    New to the CF scene
    Join Date
    Jul 2007
    Location
    Netherlands
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    So if I get this right this is a browser problem, because according to W3C the image-element is supported for SVG. But I need to save the SVG made by the javascript-drawer in a database.
    Is there an other way to get the (correct) data from the container-object?
    Last edited by serque; 07-10-2007 at 08:33 AM.

  • #4
    New to the CF scene
    Join Date
    Jul 2007
    Location
    Netherlands
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Could anyone please tell me what I'm doing wrong here, cause I don't get it. When I create anything but an image or img tag, all works fine, just only with these elements I dont get a closing tag in the innerHTML.

    I've been searching the internet for several hours now and I can't find anything useful on the subject. So assuming this isn't too difficult I'm doing here, it must be something really stupid I'm missing.

    All help would be appreciated


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •