Блог

Главная - Вопросы по программированию - Почему Vue 3 Отображает только первый SVG в Спрайте?

Почему Vue 3 Отображает только первый SVG в Спрайте?

#vue.js #svg #sprite

Вопрос:

У меня есть Vue 3.1.1 проект, и я вижу странную проблему. Если я помещу файл SVG в свой шаблон, который ссылается на спрайт, появится только первый его экземпляр.

Вот мой код шаблона:

 <template>
<div>
  <svg>
    <use href="@/assets/images/icons-master.svg#project"></use>
  </svg>
  <svg>
    <use href="@/assets/images/icons-master.svg#project"></use>
  </svg>
</div>
</template>

Вот как он отображается в DOM (протестирован в Chrome, Firefox и Safari):

введите описание изображения здесь

Видите, как он удаляет #project путь к файлу из второго SVG?

Если я попробую использовать другое имя файла, я смогу увидеть первый экземпляр, в котором используется файл, а последующие SVG-файлы будут #id удалены и не появятся.

Мой SVG-файл структурирован следующим образом.

 <svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
  <symbol id="project" viewbox="0 0 16 17">
    <g ...>
      <path ...>
      </path>
    </g>
  </symbol>
</svg>

Раньше это прекрасно работало Vue 2.x . Это неправильный синтаксис SVG или ошибка в Vue?

Ответ №1:

Это может быть ошибкой с Vite, но, похоже, обходной путь состоит в том, чтобы не использовать компонент @ пути из vite.config.js :

 import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, '/src'),
    },
  }
})

Таким образом, обходной путь состоит в том, чтобы изменить путь SVG на этот:

 src/assets/images/icons-master.svg#project

Где src заменяет @ .

Метки: