使用SVG文件通过Vuetify创建视差效果

Question

vuetify提供了v-parallax组件以创建典型的parallax效果，该效果创建了3d效果，使图像看上去比窗口滚动的速度慢。

<template>
  <v-parallax src="https://cdn.vuetifyjs.com/images/parallax/material.jpg"></v-parallax>
</template>

很遗憾，它不适用于svg个文件。

是否有人知道使用parallax或vuetify文件使用vue文件创建svg效果的简便方法吗？

Answer 1

如果通过svg数据库base64编码，则可以使用它

data:image/svg+xml;base64,[data]，其中[data]是通过将其传递到类似https://www.base64encode.org/的编码器中而获得的数据

示例：

<v-parallax src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/PjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgNTggNTgiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDU4IDU4OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PGNpcmNsZSBzdHlsZT0iZmlsbDojRUJCQTE2OyIgY3g9IjI5IiBjeT0iMjkiIHI9IjI5Ii8+PHBvbHlnb24gc3R5bGU9ImZpbGw6I0ZGRkZGRjsiIHBvaW50cz0iNDQsMjkgMjIsNDQgMjIsMjkuMjczIDIyLDE0Ii8+PHBhdGggc3R5bGU9ImZpbGw6I0ZGRkZGRjsiIGQ9Ik0yMiw0NWMtMC4xNiwwLTAuMzIxLTAuMDM4LTAuNDY3LTAuMTE2QzIxLjIwNSw0NC43MTEsMjEsNDQuMzcxLDIxLDQ0VjE0YzAtMC4zNzEsMC4yMDUtMC43MTEsMC41MzMtMC44ODRjMC4zMjgtMC4xNzQsMC43MjQtMC4xNSwxLjAzMSwwLjA1OGwyMiwxNUM0NC44MzYsMjguMzYsNDUsMjguNjY5LDQ1LDI5cy0wLjE2NCwwLjY0LTAuNDM3LDAuODI2bC0yMiwxNUMyMi4zOTQsNDQuOTQxLDIyLjE5Nyw0NSwyMiw0NXogTTIzLDE1Ljg5M3YyNi4yMTVMNDIuMjI1LDI5TDIzLDE1Ljg5M3oiLz48L3N2Zz4=" height="200">