CODEWITHSUNDEEP
asp.net.netsvgblazormaui
aidangig
aidangig

Reputation: 189

How can I modify font-family styling in an external SVG file fetched from a CDN link in .NET Maui Blazor Hybrid?

How can I modify a CSS font-family applied to an img tag in from an external SVG file CDN resource in .NET Maui Blazor Hybrid?

.NET Maui Blazor Hybrid Image Display

I previously tried to modify the <img src="..." /> tag to properly utilize the updated font-family for the font after the source has been fetched. The src= attribute successfully retrieves the back-end CDN link which holds the SVG file.

The problem is once the SVG file has been loaded and displayed in the Razor Markup when running the application, it does not apply any font styling updates to the markup's img tag. I believe the SVG file being stored and fetched from another resource dynamically is preventing modifications to the stylization. I also wonder if I cannot modify the font-family loaded in the img tag due to .NET Maui Blazor limitations with this external resource.

Razor Code-

<img src="@IconURL" width="150" height="150" />

Where IconURL is a string property that contains the CDN link which holds the SVG file. In my dev tools screenshot, it displays the img tag styling needed but does not display the actual font.

You can see the <img /> tag displayed in the .NET Maui Blazor Hybrid Dev Tools Window. This displays the image properly but allows for no changes to be made after initialization and first load to the font within the SVG.

Does .NET Maui Blazor Hybrid not allow for modifying an image's font after the Razor component loads? I need to modify the actual SVG content styling itself but that is stored in the SVG file from the CDN link. What are some possible solutions or options to achieve the result?

Upvotes: 0

Views: 455

Answers (1)

YonglunLiu
YonglunLiu

Reputation: 71

It's not that MAUI Blazor is preventing you from modifying your font style.

According to SVG's documentation The quick way: img element, when you use the img tag to display an SVG image, you cannot modify its style externally.

If you want to control the SVG content with CSS, you must include inline CSS styles in your SVG code. (External stylesheets invoked from the SVG file take no effect.)

After the following tests, when referencing an SVG file via a url link, its style cannot be modified.

// In this test, I only modified the URL of data to network and local for testing.
<object type="image/svg+xml" data="test.svg"></object>

// Use the following code to get the SVG object in the Object tag and modify the font of all Text tags in SVG.
function ChangeFont() {
            const objTag = document.querySelector('object');
            const svg = objTag.getSVGDocument();
            Array.from(svg.getElementsByTagName('text'))
                .forEach(p => p.setAttribute('font-family', 'monospace'));
        }

When the referenced SVG is local, all text can be successfully modified to monospace. However, when referencing URL links, objTag.getSVGDocument(); will return null.

Update:

You could refer to the following steps to call this Javascript method in a razor page.

Step 1. Add the above js method ChangeFont into wwwroot/index.html.

Step 2. Call this method in a razor page using C# code:

@code{
    private async Task SVGChangeFont()
    {
        await JS.InvokeVoidAsync("ChangeFont");
    }
}

Step 3. Set this method to the load event of .

<object type="image/svg+xml" data="helloworld.svg" @onload="SVGChangeFont"></object>

Upvotes: 2

Related Questions