search

exupero / saveSvgAsPng

Save SVGs as PNGs from the browser.
MIT License
1.09k stars 362 forks source link

Specifying Font Family for the svg while downloading #166

Closed eMahtab closed 6 years ago

eMahtab commented 6 years ago

Hi @exupero , I'm trying to use the modifyCss option to specify font-family e.g. Helvetica, while downloading the element as svg. But not able to figure out how to call or specify the font-family css property in the modifyCss option.

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="saveSvgAsPng.js"></script>
</head>
<body>
  <svg id="s1" width="1000" height="140">
   <text id="t" x="0" y="15" >Some random text to check font family attaribute to save Svg!</text> 
   <circle cx="200" cy="60" r="40" stroke="green" stroke-width="4" fill="yellow" />
   Sorry, your browser does not support inline SVG.
  </svg> 

  <script>
   // saveSvg( document.getElementById("s1"), "diagram.svg",{scale: 3,modifyCss:{t:'font-family: Helvetica'}} );

    saveSvg( document.getElementById("s1"), "diagram.svg",{scale: 0.5,

     modifyCss: function() {
      // selector = selector.replace('#selectors-prefixed ', '');
      // properties = properties.replace('green', 'blue');
      alert("Selector is "+selector);
      console.log("Properties is "+properties);

      return '#s1' + '{font-family: Helvetica}';
    }

    } );

  </script>
</body>
</html>
exupero commented 6 years ago

The problem is that the modifyCss function modifies existing CSS rules, and the above example has no CSS rules.

Currently, there's no good hook for adding CSS to the SVG. As a workaround, you can add an empty CSS rule for svg to the HTML, then modify that rule with the modifyCss function to change the font.

I'm open to pull requests for adding an option to append CSS rather than just transform it.