如何在没有构建步骤的 Vue 独立脚本中使用 svg答案

【问题标题】：How to use svg in Vue standalone script without build step如何在没有构建步骤的 Vue 独立脚本中使用 svg
【发布时间】：2022-07-13 22:34:52
【问题描述】：

我正在尝试将 Vue 用作 HTML 文件中的独立脚本，但这会导致我的内联 svg 图标变成实心方块。我已经将 Vue 2 和 Vue 3 作为独立脚本进行了尝试，并且都给出了相同的行为。

虽然我已经找到了解决 Vue 涉及 webpack 加载器配置的 svg 问题的方法，但我正在寻找一种方法来解决 svg 问题，而无需任何构建步骤，并且只使用 Vue 作为独立脚本。

注意图标svg是直接从Carbon Design Icons复制过来的

<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
    <script src="https://unpkg.com/vue@3"></script>
  </head>

  <body>
    <div id="app">
      {{message}}
      <svg
        id="icon"
        xmlns="http://www.w3.org/2000/svg"
        width="32"
        height="32"
        viewBox="0 0 32 32"
      >
        <defs>
          <style>
            .cls-1 {
              fill: none;
            }
          </style>
        </defs>
        <path
          d="M16,8a5,5,0,1,0,5,5A5,5,0,0,0,16,8Zm0,8a3,3,0,1,1,3-3A3.0034,3.0034,0,0,1,16,16Z"
        />
        <path
          d="M16,2A14,14,0,1,0,30,16,14.0158,14.0158,0,0,0,16,2ZM10,26.3765V25a3.0033,3.0033,0,0,1,3-3h6a3.0033,3.0033,0,0,1,3,3v1.3765a11.8989,11.8989,0,0,1-12,0Zm13.9925-1.4507A5.0016,5.0016,0,0,0,19,20H13a5.0016,5.0016,0,0,0-4.9925,4.9258,12,12,0,1,1,15.985,0Z"
        />
        <rect
          id="_Transparent_Rectangle_"
          data-name="&lt;Transparent Rectangle&gt;"
          class="cls-1"
          width="32"
          height="32"
        />
      </svg>
    </div>
    <div>
      Icon outside of Vue
      <svg
        id="icon2"
        xmlns="http://www.w3.org/2000/svg"
        width="32"
        height="32"
        viewBox="0 0 32 32"
      >
        <defs>
          <style>
            .cls-2 {
              fill: none;
            }
          </style>
        </defs>
        <path
          d="M16,8a5,5,0,1,0,5,5A5,5,0,0,0,16,8Zm0,8a3,3,0,1,1,3-3A3.0034,3.0034,0,0,1,16,16Z"
        />
        <path
          d="M16,2A14,14,0,1,0,30,16,14.0158,14.0158,0,0,0,16,2ZM10,26.3765V25a3.0033,3.0033,0,0,1,3-3h6a3.0033,3.0033,0,0,1,3,3v1.3765a11.8989,11.8989,0,0,1-12,0Zm13.9925-1.4507A5.0016,5.0016,0,0,0,19,20H13a5.0016,5.0016,0,0,0-4.9925,4.9258,12,12,0,1,1,15.985,0Z"
        />
        <rect
          id="_Transparent_Rectangle_"
          data-name="&lt;Transparent Rectangle&gt;"
          class="cls-2"
          width="32"
          height="32"
        />
      </svg>
    </div>
  </body>
  <script>
    const { createApp } = Vue;

    createApp({
      data() {
        return {
          message: "Hello Vue!"
        };
      }
    }).mount("#app");
  </script>
</html>

https://codesandbox.io/s/wonderful-albattani-dxkvdt?file=/index.html:0-2221

【问题讨论】：

在 defs 中设置样式似乎是个错误
svg 图标直接从 Carbon Design Icons 复制而来，我更新了演示链接以显示 svg 在 Vue 挂载 div 之外正常工作

标签： javascript vue.js svg vuejs2 vuejs3

【解决方案1】：

将填充：无更改为填充：透明

【讨论】：