Including CSS elements in yfiles SvgExport

Question

I am trying to export a yfiles GraphComponent to an SVG format, but I have found out that the result doesn’t include the CSS properties from a .css file, only the inline style attribute. Is it related to CORS? Is there a way to tell the SvgExport to include css files, I have already tried setting the cssStyleSheet=null but it does not work.

Here is the code that I am using;

const graph = this.props.graphComponent;
const exporter = new yfiles.view.SvgExport(graph.contentRect, 1);
exporter.cssStyleSheet = null;

svg = exporter.exportSvg(graph);

svg.setAttribute("xmlns", "http://www.w3.org/2000/svg");
svg.setAttribute("xmlns:xlink", "http://www.w3.org/1999/xlink");
let blob = new Blob([svg.outerHTML], {type: "image/svg+xml"});
let svgUrl = URL.createObjectURL(blob);
let downloadLink = document.createElement("a");
downloadLink.href = svgUrl;
downloadLink.download = "test_export.svg";
document.body.appendChild(downloadLink);
downloadLink.click();
document.body.removeChild(downloadLink);

The demo.css file has the properties

.noConditions {
  display: none;
}

#entry-point circle {
  opacity: 1;
}

But the exported svg component does not include the display:none and opacity:1

<g id="entry-point">
      <defs>
        <linearGradient id="ygc1_3411" x1="0%" y1="0%" x2="0%" y2="100%">
          <stop offset="0%" style="stop-color:rgb(139,230,182);stop-opacity:1"></stop>
          <stop offset="100%" style="stop-color:rgb(69,188,86);stop-opacity:1"></stop>
        </linearGradient>
      </defs>
         <circle cx="22" cy="7" r="6" stroke-width="3" fill="url(#ygc1_3411)" opacity="0">
            <title>Element Name</title>     
         </circle>
         <circle stroke="gray" fill-opacity="0" cx="55" cy="40" r="15"></circle>
         <image href="data:image/svg+xml;base64,.." width="20" height="20" x="45" y="30"></image>
      <g class="noConditions">
         <circle cx="7" cy="7" r="6" stroke-width="3" fill="#7425ad" opacity="1">
            <title></title>          
         </circle>
       </g>
</g>

Including CSS elements in yfiles SvgExport

0 Answers0