如何设置 xmlns 导入的 SVG 图像的样式？

Question

我正在我的 Angular 8 项目中导入 SVG 图像。我用 HTML

生成这张图片

<div #workflow class="left_pane"></div>

和这个 TS：

@ViewChild("workflow", {static: true})
  public mermaidDiv;

在开发人员工具中检查屏幕时，生成的 SVG 代码如下所示：

<svg id="graphDiv" width="100%" xmlns="http://www.w3.org/2000/svg" style="max-width: 290.859375px;" viewBox="0 0 290.859375 421.78125">…</svg>

这会根据需要正确生成图像。但是，我无法更改使用此 SVG 设置的最大宽度属性。我在 component.scss 代码中尝试了以下内容：

svg#graphDiv {
  min-width: 1000px !important;
}

但这没有任何作用。如何使用用户样式表覆盖此 xmlns SVG 的最大宽度设置？有没有办法覆盖 element.style ?

Answer 1

您可以删除 max-width 的值，方法是将其设置为 none !important:

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

<svg id="graphDiv" width="100%" xmlns="http://www.w3.org/2000/svg" style="max-width: 290.859375px;" viewBox="0 0 290.859375 421.78125">
  <rect x="0" y="0" width="100%" height="100%" fill="silver" />
</svg>

Answer 2

这可能不起作用，因为您在组件文件中。尝试将代码放入 styles.scss 文件。

如何设置 xmlns 导入的 SVG 图像的样式？

How to style xmlns imported SVG image?

html

css

angular

svg

xml-namespaces