更改 Mermaid.render 生成的 SVG 的大小？

Question

我正在尝试在我的 Angular 8 项目中使用美人鱼渲染 SVG。一切都完全按照需要呈现，除了我唯一的问题是尺寸太小，而且我无法覆盖 CSS 中的最大宽度。所以我想在我的 TS 文件中设置更大的宽度。

在 TS 的 onIt() 函数中，我包含了以下内容：

mermaid.render("graphDiv", graphDefinition, (svgCode, bindFunctions) => {
        element.innerHTML = svgCode;
        bindFunctions(element);
      element.setAttribute("style", "max-width: 1000px !important")
      });

但是，这不会增加自动设置的最大宽度。

我已经尝试更改 CSS 中的“graphDiv”，但没有成功。是否可以使用打字稿覆盖预设宽度？

Answer 1

您可以在 Angular 项目的 styles.scss 文件中覆盖这些设置。像这样：

svg#graphDiv {
 max-width: none !important;
}

这应该覆盖美人鱼设置。

更改 Mermaid.render 生成的 SVG 的大小？

Change size of Mermaid.render generated SVG?

html

css

typescript

render

mermaid