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

huangapple go评论68阅读模式
英文:

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

问题

如何在.NET Maui Blazor Hybrid中从外部SVG文件CDN资源中修改应用于img标签的CSS font-family

我之前尝试过修改<img src="..." />标签,以便在获取资源后正确使用更新后的font-familysrc=属性成功获取了后端CDN链接,该链接保存了SVG文件。

问题在于,一旦SVG文件在运行应用程序时加载并显示在Razor标记中,它不会将任何字体样式更新应用于标记的img标签。我认为SVG文件存储在另一个动态获取的资源中,这会阻止对样式的修改。我还想知道是否由于.NET Maui Blazor与这个外部资源的限制,我无法修改img标签中加载的font-family

Razor代码-

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

其中IconURL是一个包含CDN链接的string属性,该链接保存了SVG文件。在我的开发工具截图中,它显示了所需的img标签样式,但不显示实际字体。

您可以在.NET Maui Blazor Hybrid Dev Tools窗口中看到<img />标签的显示。
这显示了图像,但在初始化和首次加载后不允许进行任何更改以修改SVG中的字体。

.NET Maui Blazor Hybrid是否允许在Razor组件加载后修改图像的字体?
我需要修改SVG内容的实际样式,但它存储在来自CDN链接的SVG文件中。有哪些可能的解决方案或选项来实现这个结果?

英文:

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?

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

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?

答案1

得分: 2

MAUI Blazor并不会阻止您修改字体样式。

根据SVG的文档快速方式:img元素 ,当您使用img标签显示SVG图像时,您无法外部修改其样式。

如果您想使用CSS控制SVG内容,必须在SVG代码中包含内联CSS样式。(从SVG文件调用的外部样式表不起作用。)

经过以下测试,通过URL链接引用SVG文件时,其样式无法被修改。

// 在此测试中,我仅修改了数据的URL以进行测试。
<object type="image/svg+xml" data="test.svg"></object>
// 使用以下代码获取Object标记中的SVG对象,并修改SVG中所有Text标记的字体。
function ChangeFont() {
    const objTag = document.querySelector('object');
    const svg = objTag.getSVGDocument();
    Array.from(svg.getElementsByTagName('text'))
        .forEach(p => p.setAttribute('font-family', 'monospace'));
}

当引用的SVG是本地时,所有文本可以成功修改为monospace。但是,当引用URL链接时,objTag.getSVGDocument(); 将返回null。

更新:

您可以参考以下步骤在razor页面中调用此JavaScript方法。

步骤1. 将上述js方法ChangeFont添加到wwwroot/index.html中。

步骤2. 使用C#代码在razor页面中调用此方法:

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

步骤3. 将此方法设置为<object>的加载事件。

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

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.
&lt;object type=&quot;image/svg+xml&quot; data=&quot;test.svg&quot;&gt;&lt;/object&gt;
// 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(&#39;object&#39;);
            const svg = objTag.getSVGDocument();
            Array.from(svg.getElementsByTagName(&#39;text&#39;))
                .forEach(p =&gt; p.setAttribute(&#39;font-family&#39;, &#39;monospace&#39;));
        }

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(&quot;ChangeFont&quot;);
    }
}

Step 3. Set this method to the load event of <object>.

&lt;object type=&quot;image/svg+xml&quot; data=&quot;helloworld.svg&quot; @onload=&quot;SVGChangeFont&quot;&gt;&lt;/object&gt;

huangapple
  • 本文由 发表于 2023年5月30日 03:29:35
  • 转载请务必保留本文链接:https://go.coder-hub.com/76359923.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定