How to style xmlns imported SVG image?-CodePudding

I am importing an SVG image in my Angular 8 project. I generate this image with this HTML

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

and this TS:

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

When inspecting the screen in the developer tools, the generated SVG code looks something like this:

<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>

This correctly generates the image as needed. However, I am unable to alter the max-width property that is set with this SVG. I have tried the following in my component.scss code:

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

But this does nothing. How can I override the max-width setting for this xmlns SVG with the user stylesheet? Is there a way to override the element.style ?

CodePudding user response：

You can remove the value of max-width by setting it to 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>

CodePudding user response：

This might not be working because you are in component file. Try putting the code into styles.scss file.