uniapp 开发app 不能渲染svg解决方法

最开始在web端项目logo使用的是svg，所以想的是在app也用svg结果在web上是正常的，在手机上显示不出来，搜了一下，结果都是说不支持app，虽然可以把它转为png解决，但是想着之后还有用svg画一些动态图的功能，还是得找方法解决。最后发现可以用renderjs，结合D3js渲染，添加动画也能生效。在此记录一下

1. 安装D3js

pnpm add d3

2.renderjs

<script module="svg" lang="renderjs">
import * as d3 from 'd3';

export default {
	mounted() {
		this.dravLogo()
	},
	methods: {
		dravLogo() {
			// 创建svg viewBox 可视区域
			const svg = d3.create('svg').attr('viewBox', '0 0 776 920').attr('height', '150').attr('width', '150');
			svg
				.append('path')
				.attr('class', 'svg-animate')
				.attr('shape-rendering', 'geometricPrecision')
				.attr('fill-rule', 'evenodd')
				.attr(
					'd',
					'M387 0L0 134L56 615C56 615 71 675 137 742C161.098 766.463 187.463 788.127 211.226 805.774L545 472C545 472 556 456.903 556 442C556 427.097 545 415 545 415L472 340L307 505L253 451C253 451 251 447.5 251 444C251 440.5 253 437 253 437L392 297L549 296L665 412C665 412 678.259 426.404 678 443C677.741 459.596 664 476 664 476L286 855L387 918L490 854C490 854 577 801 637 742C697 683 718 615 718 615L774 134L580.137 66.8742L236 413C236 413 222 428.013 222 444C222 459.987 236 475 236 475L307 546L471 382L526 437C526 437 528 441 528 444C528 447 526 450 526 450L307 669L114 476C114 476 100 459 100 444C100 429 109 416 109 416L489.507 35.4933L387 0Z'
				)
			// 渲染dom
			const svgDom = document.querySelector("#svgs")
			svgDom.append(svg.node());
		}
	}
}
</script>

3. 动画属性

// svg描边动画

:deep(.svg-animate) {
  stroke: #fff;
  fill: transparent;
  stroke-width: 10;
  stroke-dasharray: 7030;
  stroke-dashoffset: 7030;
  animation: dash 2s linear forwards;

}

@keyframes dash {
  40% {
    stroke-dashoffset: 0;
    fill: transparent;
  }

  100% {
    stroke-dashoffset: 0;
    fill: #fff;
  }
}