svg显示欠压
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了svg显示欠压相关的知识,希望对你有一定的参考价值。
参考技术A 使用loader:yarn add --dev svg-sprite-loader
在vue.config.js添加以下使用svg-sprite-loader:
chainWebpack:config=> const dir = path.resolve(__dirname,'src/assets/icons') config.module .rule('svg-sprite') .test(/\.svg$/) .include.add(dir).end() .use('svg-sprite-loader').loader('svg-sprite-loader').options(extract:false).end() config.plugin('svg-sprite').use(require('svg-sprite-loader/plugin', [plainSprite:true])) config.module.rule('svg').exclude.add(dir)
如何在react-native中显示动画svg?
如何在本机显示动画svg(带有关键帧)?目前,我只能显示静态SVG。
似乎react-native-svg仅能显示静态svg。
这里是SVG的摘要:
const xml = `<svg
version="1.1"
xmlns="http://www.w3.org/2000/svg"
width="64"
height="64"
viewbox="0 0 64 64">
<defs>
<filter id="blur" width="200%" height="200%">
<feGaussianBlur in="SourceAlpha" stdDeviation="3"/>
<feOffset dx="0" dy="4" result="offsetblur"/>
<feComponentTransfer>
<feFuncA type="linear" slope="0.05"/>
</feComponentTransfer>
<feMerge>
<feMergeNode/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
<style type="text/css"><![CDATA[
/*
** CLOUDS
*/
@keyframes am-weather-cloud-2
0%
-webkit-transform: translate(0px,0px);
-moz-transform: translate(0px,0px);
-ms-transform: translate(0px,0px);
transform: translate(0px,0px);
50%
-webkit-transform: translate(2px,0px);
-moz-transform: translate(2px,0px);
-ms-transform: translate(2px,0px);
transform: translate(2px,0px);
100%
-webkit-transform: translate(0px,0px);
-moz-transform: translate(0px,0px);
-ms-transform: translate(0px,0px);
transform: translate(0px,0px);
.am-weather-cloud-2
-webkit-animation-name: am-weather-cloud-2;
-moz-animation-name: am-weather-cloud-2;
animation-name: am-weather-cloud-2;
-webkit-animation-duration: 3s;
-moz-animation-duration: 3s;
animation-duration: 3s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-iteration-count: infinite;
...
<SvgXml xml=xml width="100%" height="100%" />
答案
在本地显示SVG
Use react-native-svg or lottie-react-native
另一答案
我的建议是签出react native的lottie包,如果您可以将动画转换为lottie文件json,那么将很容易显示
以上是关于svg显示欠压的主要内容,如果未能解决你的问题,请参考以下文章