Как установить Vue. js SVG компонент в качестве фонового изображения? - PullRequest
Новая
       57

Как установить Vue. js SVG компонент в качестве фонового изображения?

0 голосов
/ 06 апреля 2020

Я пытаюсь создать систему дизайна, в которой пользователи могут нажимать на различные SVG-файлы и устанавливать их в качестве фона своей страницы. Они должны иметь возможность изменять цвет SVG, поэтому я подумал, что они будут такими компонентами: 

<template>
<svg xmlns='http://www.w3.org/2000/svg' 
viewBox='0 0 80 80' width='80' height='80'>
<g fill='#9C92AC' fill-opacity='0.4'>
    <path d='M0 0h80v80H0V0zm20 20v40h40V20H20zm20 35a15 15 0 1 1 0-30 15 15 0 0 1 0 30z' opacity='.5'></path>
    <path d='M15 15h50l-5 5H20v40l-5 5V15zm0 50h50V15L80 0v80H0l15-15zm32.07-32.07l3.54-3.54A15 15 0 0 1 29.4 50.6l3.53-3.53a10 10 0 1 0 14.14-14.14zM32.93 47.07a10 10 0 1 1 14.14-14.14L32.93 47.07z'></path>
</g>
</svg>
</template>

<script>
export default {
  props: {
    color: {
      type: String,
      default: 'black'
    }
  }
}
</script>

<style>
</style>

Но мне нужно установить этот компонент как фоновое изображение другого элемента (страницы ). Как я мог это сделать? Пока я пробовал это безрезультатно: 

.test{
  background-image:url('~/components/svg/1.vue')
}

Я не уверен, что это сработает, так как я не думаю, что Vue компоненты могут быть установлены в качестве фона, верно? Любая помощь высоко ценится!

Спасибо, Исаа c

...