yFiles SvgExport导出SVG未包含外部CSS属性的问题求助

问题概述 #

将yFiles GraphComponent导出为SVG时，导出结果仅包含内联style属性，外部demo.css中的样式（如.noConditions {display: none}、#entry-point circle {opacity: 1}）未生效；尝试设置exporter.cssStyleSheet = null无效果，疑问是否与CORS有关，以及如何让SvgExport包含外部CSS。

核心原因 #

• 与CORS无关：yFiles的SvgExport不会自动抓取外部CSS，根源是浏览器CSSOM的访问限制，无法直接读取外部样式表规则（即使同域也需主动处理）。
• exporter.cssStyleSheet = null的作用是禁用yFiles自动生成内联样式，而非导入外部CSS，因此该操作无法解决问题，反而可能丢失默认样式。

解决方案 #

方案一：手动读取外部CSS并注入SVG #

通过fetch读取外部CSS内容，在导出的SVG中添加<style>标签注入样式：

// 读取外部CSS文件
async function loadCSS(url) {
  const response = await fetch(url);
  return await response.text();
}

// 导出SVG逻辑
async function exportSVG() {
  const graph = this.props.graphComponent;
  const exporter = new yfiles.view.SvgExport(graph.contentRect, 1);
  const svg = exporter.exportSvg(graph);

  // 加载并注入demo.css
  const cssContent = await loadCSS('demo.css');
  const styleElement = document.createElementNS('http://www.w3.org/2000/svg', 'style');
  styleElement.textContent = cssContent;
  svg.insertBefore(styleElement, svg.firstChild);

  // 补充SVG命名空间
  svg.setAttribute("xmlns", "http://www.w3.org/2000/svg");
  svg.setAttribute("xmlns:xlink", "http://www.w3.org/1999/xlink");

  // 触发下载
  const blob = new Blob([svg.outerHTML], {type: "image/svg+xml"});
  const svgUrl = URL.createObjectURL(blob);
  const downloadLink = document.createElement("a");
  downloadLink.href = svgUrl;
  downloadLink.download = "test_export.svg";
  document.body.appendChild(downloadLink);
  downloadLink.click();
  document.body.removeChild(downloadLink);
}

方案二：传入已加载的CSSStyleSheet对象 #

如果外部样式表已加载到页面中，可直接获取对应的CSSStyleSheet对象传给exporter：

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

// 找到页面中的demo.css样式表
const demoStyleSheet = Array.from(document.styleSheets).find(
  sheet => sheet.href?.includes('demo.css')
);
if (demoStyleSheet) {
  exporter.cssStyleSheet = demoStyleSheet;
}

const svg = exporter.exportSvg(graph);

// 后续命名空间设置与下载逻辑同方案一...

注意事项 #

• 若CSS文件跨域加载，浏览器会限制访问cssRules，此时只能用方案一（需服务器允许跨域访问该CSS文件）。
• 确保CSS选择器与SVG中的元素匹配，避免因命名空间或元素结构差异导致样式不生效。
• 不要设置exporter.cssStyleSheet = null，否则会丢失yFiles生成的默认内联样式。

内容的提问来源于stack exchange，提问作者Andrei