如何样式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设置的max-width属性。我在我的组件中尝试了以下操作。scss代码:

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

但是这没有任何作用。我如何用用户样式表覆盖这个xmlns SVG的最大宽度设置?是否有方法重写元素。风格吗?

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

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