Inline SVG element not adjusting to available width

[ikondrasovas]

The following inline SVG element is properly rendered into a regular bootstrap page:

<svg viewBox="0 0 3000 1500" preserveAspectRatio="xMidYMin slice" style="width: 100%; padding-bottom:calc(50%); height: 1px; overflow: visible"> <rect width="3000" height="1500" /> <line x1="0" y1="0" x2="3000" y2="1500" style="stroke:rgb(255,0,0);stroke-width:2" /> </svg>

However, when used into my Blazor project, the svg width is not properly adjusted to the available width.

There are some necessary workarounds to make this width adjustment works in most browsers and they usually work, but not with my Blazor project.

Is this something known that is related to Blazor? What should I do?

Thank you,

[SteveSandersonMS]

I don’t think this is related to Blazor, since Blazor doesn’t control your CSS styling at all.

But if you end up tracking this down and find that there is some issue in Blazor please do let us know!

[mdegroot71]

I am having the same issues. I've taken all of the same CSS, Javascript and produced HTML from Blazor, popped it into a static HTML page and ran it. The SVG scales as it should without any workarounds. I'm using Chrome. When I run it with Blazor, the SVG behaves in a weird way. This isn't a CSS issue. This is definitely a rendering issue b/c no matter how I inject the SVG, it still does not behave as if Blazor was not present.