CODEWITHSUNDEEP
node.jssvgjsdom
karthick
karthick

Reputation: 6168

How to manipulate svg using jsDom - node.js?

I am having following svg file

FileName : seatLayout.svg

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="800px" height="600px" viewBox="0 0 800 600" enable-background="new 0 0 800 600" xml:space="preserve">
  <g id="111">
     <rect x="130" y= "130" height="320" width="550" id="rect1" fill ="white" stroke="blue" >       </rect>
  </g>
</svg>

Note

Technology/programming - node.js

I want to append the text elements inside the rect element

 <text x="0" y="10" font-family="Verdana" font-size="55" fill="blue" > Hello </text>

I had tried to use jsDOM to achieve. But it is not working.

 jsdom.env('seatLayout.svg', function (errors, window) {
    if(!errors){
       console.log(window.document.getElementById("rect1"));
    }
 });

Problem

It is logging entire window object instead of rect element.

Is it possible to manipulate svg using jsDOM ?

Any suggestion will be grateful

Upvotes: 5

Views: 4343

Answers (1)

Amol M Kulkarni
Amol M Kulkarni

Reputation: 21639

Hope you are looking manipulating the innerHTML of your rect1

Note: As Robert Longson has pointed some SVG tags like <circle> can't be a child of <rect>, So you need consider those things as well for SVG. I am not good at SVG, but following is the Node.js code which does the required manipulation.

Node.js Code:

var strSVG = '<?xml version="1.0" encoding="utf-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="800px" height="600px" viewBox="0 0 800 600" enable-background="new 0 0 800 600" xml:space="preserve">  <g id="111"> <rect x="130" y= "130" height="320" width="550" id="rect1" fill ="white" stroke="blue" >       </rect>  </g></svg>'
var strYourText = 'Hello';
var jsdom = require("jsdom");

jsdom.env({
        html : strSVG, 
        done : function (errors, window) {
            window.document.getElementById("rect1").innerHTML = strYourText;
            console.log(window.document.getElementsByTagName('html')[0].innerHTML); 
        }
    }
);

Update: The following code can be used to generate a valid DOCTYPE string.

var node = document.doctype;
var html = "<!DOCTYPE "
         + node.name
         + (node.publicId ? ' PUBLIC "' + node.publicId + '"' : '')
         + (!node.publicId && node.systemId ? ' SYSTEM' : '') 
         + (node.systemId ? ' "' + node.systemId + '"' : '')
         + '>';

This method returns the correct string for valid (HTML5) doctypes, eg:

  • <!DOCTYPE html>
  • <!DOCTYPE html SYSTEM "about:legacy-compat">
  • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">

Explanation of the code:

node.name      # Holds the name of the root element, eg: HTML / html
node.publicId  # If this property is present, then it's a public document type.
               #>Prefix PUBLIC
!node.publicId && node.systemId
               # If there's no publicId, but a systemId, prefix SYSTEM
node.systemId  # Append this if present

Upvotes: 3

Related Questions