Question

我想在我的角度项目中使用svg sprite。我看到css-tricks post，在本文中提到了使用include_once将SVG精灵注入页面顶部的方法。然后使用如下：

<svg viewBox="0 0 100 100" class="icon shape-codepen">
  <use xlink:href="#shape-codepen"></use>
</svg>

我怎么能用javascript方式做到这一点？感谢。

Answer 1

您可以在body onload上调用以下函数来实现此目的：

foreach (var ConnectionString in ConnectionStrings)
        {
            connection = new OracleConnection(ConnectionString);
            using (CdpsiUpdateSql NewUpdater = new CdpsiUpdateSql(connection))
            {
                labelBDver.Text = Global.VersaoBd = NewUpdater.LookUp("GGDSC", "APPLCONFIG", "GGCOD = 'APP_NAME'");
                lbVersao.Text = "Versão: " + Global.NovaVersao;
                CpdisUpdateScripts Scripts = new CpdisUpdateScripts();
                CdpsiUpdateSqlparser Parser = new CdpsiUpdateSqlparser();
                var progressHandler = new Progress<CpdisUpdateScripts.Result>(result =>
                {
                    textBox1.Text = result.File;
                    //Global.TotalExecCerros = result.TotalWithErrors;
                    //Global.TotalExecSuccessfull = result.totalSuccess;
                    Global.TotalExecCerros += result.Errors;
                    Global.TotalExecSuccessfull += result.Successes;
                    labelErrorCommandCnt.Text = result.Errors.ToString();
                    labelSuccessfulCnt.Text = result.Successes.ToString();
                    Refresh();

                });
                IProgress<CpdisUpdateScripts.Result> progress = progressHandler;
                Task MyTask = Task.Run(() =>
                {

                    Scripts.ExecuteCommands(Global.Update + @"\scripts", NewUpdater, Parser,
                        Global.Update + @"\scripts", progress);

                });

            }
        }

Answer 2

尝试使用SVGInject之类的SVG注射器。这样，您可以将SVG保留在一个外部文件中，该文件将在运行时注入到HTML DOM中。该功能适用于所有支持SVG的浏览器。

一个完整的示例可能看起来像这样（其中image.svg包含您的SVG）：

<html>
<head>
  <script src="svg-inject.min.js"></script>
</head>
<body>
  <img src="image.svg" onload="SVGInject(this)" />
</body>
</html>

通过javascript将SVG注入文档的顶部

2 个答案: