vue.js - 使用 SVG 文件使用 Vuetify 创建视差效果
问题描述
vuetify
提供v-parallax
创建典型parallax
效果的组件,该组件创建 3d 效果,使图像看起来比窗口滚动得慢:
<template>
<v-parallax src="https://cdn.vuetifyjs.com/images/parallax/material.jpg"></v-parallax>
</template>
不幸的是,它不适用于svg
文件。
有谁知道是否有一种简单的方法可以使用or来创建parallax
效果,但使用文件?vuetify
vue
svg
解决方案
如果你传递 svg 数据库 base64 编码,你可以使用它
data:image/svg+xml;base64,[data]
通过将其传递到像https://www.base64encode.org/[data]
这样的编码器中,您获得的数据在哪里?
例子:
<v-parallax src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/PjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgNTggNTgiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDU4IDU4OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PGNpcmNsZSBzdHlsZT0iZmlsbDojRUJCQTE2OyIgY3g9IjI5IiBjeT0iMjkiIHI9IjI5Ii8+PHBvbHlnb24gc3R5bGU9ImZpbGw6I0ZGRkZGRjsiIHBvaW50cz0iNDQsMjkgMjIsNDQgMjIsMjkuMjczIDIyLDE0Ii8+PHBhdGggc3R5bGU9ImZpbGw6I0ZGRkZGRjsiIGQ9Ik0yMiw0NWMtMC4xNiwwLTAuMzIxLTAuMDM4LTAuNDY3LTAuMTE2QzIxLjIwNSw0NC43MTEsMjEsNDQuMzcxLDIxLDQ0VjE0YzAtMC4zNzEsMC4yMDUtMC43MTEsMC41MzMtMC44ODRjMC4zMjgtMC4xNzQsMC43MjQtMC4xNSwxLjAzMSwwLjA1OGwyMiwxNUM0NC44MzYsMjguMzYsNDUsMjguNjY5LDQ1LDI5cy0wLjE2NCwwLjY0LTAuNDM3LDAuODI2bC0yMiwxNUMyMi4zOTQsNDQuOTQxLDIyLjE5Nyw0NSwyMiw0NXogTTIzLDE1Ljg5M3YyNi4yMTVMNDIuMjI1LDI5TDIzLDE1Ljg5M3oiLz48L3N2Zz4=" height="200">
推荐阅读
- docker - 如何在“docker's run -e options”中使用列表?
- android - 如何保存列表
到房间数据库? - python - 我想使用一个变量来指定表中的行
- ruby-on-rails - 已解决:Rails 6、Webpacker、Bootstrap 5、Heroku 上的 Coffee 无法正常工作
- django - 允许用户在 django 中绘制和保存自己的地图
- java - 代码签名后可执行文件停止工作
- z3 - smtlib 中的参数函数
- c# - 加权作业计划程序 - 检索作业详细信息
- postgresql - 返回函数中带有 pg_column_size 的 knex
- typescript - 为什么将类型声明为联合与可选时,TypeScript 细化的工作方式不同?