Is it possible to get the contents of an external css file using javascript to add to an svg file?

Question

I need to get the contents of an external css file in order to add it to an svg.

What I'm looking for is in effect a toString method for the css. Is this possible? I haven't been able to find a solution yet.

Here is the solution xml I'm looking for for the svg :

 <?xml version="1.0" standalone="no"?>
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
      "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1"
         width="10cm" height="5cm" viewBox="0 0 1000 500">
      <defs>
        <style type="text/css"><![CDATA[
          rect {
            fill: red;
            stroke: blue;
            stroke-width: 3
          }
        ]]></style>
      </defs>
      <rect x="200" y="100" width="600" height="300"/>
    </svg>

I tried using an external link to it but it didn't render the styles :

<?xml version="1.0" standalone="no"?>
<?xml-stylesheet href="mystyle.css" type="text/css"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
     width="10cm" height="5cm" viewBox="0 0 1000 500">
  <rect x="200" y="100" width="600" height="300"/>
</svg>

Edit : I should have added this origionally I have the svg rendering fine within the browser as it has access to the svg.

What I need to do is send the svg to a server for further processing (convert format, save to database..). The problem is that the style is lost as the css is not included in the svg xml. I need to add the css to the svg itself like the first block of code above so I can keep the stylings.

The external link should work provided you serve it with the correct mime type. — Robert Longson
– Robert Longson, Commented Jun 28, 2013 at 9:50
Are you already able to retrive the content of the css file and you only don't know how to extract the specific part? is the external css of the same domain? — t.niese
– t.niese, Commented Jun 28, 2013 at 9:52

wout · Accepted Answer · 2013-06-28 12:21:03Z

7

If you are able to use JavaScript you can get the contents of your stylesheet as follows:

[].slice.call(document.styleSheets[1].cssRules).forEach(function(rule){
  console.log('rule:', rule.cssText)
})

Where document.styleSheets[1] is your stylesheet.

answered Jun 28, 2013 at 12:21

wout

2,5963 gold badges23 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Travis Over a year ago

Thank you.this does the job. However specifying an array index doesn't seem like the best option. Is there a way to retrieve the file based on its name?

wout Over a year ago

Maybe you could try adding a class name on the link tag, then iterating over all stylesheets to look for a match. Something like if (document.styleSheets[i].ownerNode.className == 'yourclass') { //...get rules... }

Collectives™ on Stack Overflow

Is it possible to get the contents of an external css file using javascript to add to an svg file?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related