写在前面

感谢腾讯Omi团队的努力，今天您可以使用Cax引擎在小程序中渲染SVG！

SVG是一种可缩放矢量图形，一种用于描述基于可扩展标记语言的二维矢量图形的图形格式。它由万维网联盟开发，是一个开放标准。 SVG的优点是很多:

SVG以XML格式定义图形，可以通过文本编辑器创建和修改。可以搜索，索引，编写脚本或压缩SVG图像。 SVG是可扩展的，并且放大图像的质量不会降低。可以以任何分辨率查看SVG图像。可以通过各种工具（如记事本）读取和修改SVG的高质量打印。 SVG的尺寸小于JPEG和GIF图像，其可压缩性和可编程星形SVG完全支持DOM编程。交互性和动态

支持这些出色功能的先决条件是 - 需要支持 SVG 标签。例如，直接写入小程序：

复制代码

SVG的结构，样式和点击行为如上所述。但是，小程序目前不支持SVG标记。它只支持加载SVG后的背景图像，例如background-image: url（'data: image/svg + xml .），或base64 as background-图像的url。

所以我该怎么做？有没有办法让小程序支持SVG？答案是肯定的！需要这些东西（站在巨人的肩膀上）：

JSX是历史上最强大的UI表达，支持用于编写XML-Hyperscript的JS语言。 小程序内置Canvas渲染器Cax最新的渲染引擎HTM，Hyperscript Tagged Markup，可以替代JSX或其他选项，使用ES标准模板语法由Hyperscript运行时/编译时生成，以及preact作者（也是google）实现工程师）建立

以下是对Hyperscript的一点解释：

喜欢JSX中的

您好{this.props.name}复制代码

或者在js中使用htm:

Html`Hello {this.props.name}`copy code

最后将编译成:

h（'div'，null，'Hello'，this.props.name）;复制代码

嵌套的div也将被编译成嵌套的h，例如

Abc复制代码

编译:后

h（'div'，null，h（'div'，null，'abc'））复制代码

h函数的定义也非常简洁:

函数h（类型，道具，子）{return {type，props，children}}复制代码

通过执行h，可以在js中获得结构化数据，称为虚拟dom。请注意，htm具有轻微的运行时开销，而jsx则没有。

用一句话概括：

使用小程序内置Canvas渲染器在Cax中实现SVG标准的子集，并使用JSX或HTM描述SVG结构行为

直接在小程序用例:

从'././cax/cax'Page导入{html，renderSVG}（{onLoad: function（）{renderSVG（html``，'svg -a'，this）}，tapHandler: function（）{console .log（'你点击了rect'）}}）复制代码

svg-a对应于wxml:

中cax元素的id 复制代码

声明组件依赖

{'usingComponents': {'cax-element':'././cax/index'}}复制代码

小程序显示效果:

您可以使用width，height，bounds-x和bounds-y来设置绑定事件的范围，例如:

复制代码

应当注意，由元素事件触发的边界框受其自身或父节点的变换的影响，因此它不是绝对坐标的矩形触发区域。

一个更复杂的例子，使用OVG绘制Omi的徽标:

renderSVG（html``，'svg-a'，this）复制代码

小程序显示效果:

使用cax在omip和mps中渲染svg，你不必使用htm。例如，在omip中实现上面的两个例子：

renderSVG（，'svg-a'，this。$ scope）复制代码renderSVG（，'svg-a'，this。$ scope）复制代码

请注意，在omip中传递的最后一个参数不是这个，而是。$ scope。

在mps中，更彻底的是，您可以单独创建svg文件并通过导入导入它们。

//注意你不能在这里编写test.svg，因为mps会将test.svg编译成test.js导入testSVG来自'././svg/test'import {renderSVG}来自'././cax/Cax'Page（{tapHandler: function（）{this.pause=！this.pause}，onLoad: function（）{renderSVG（testSVG，'svg -a'，this）}}）复制代码

例如test.svg：

复制代码

将编译成mps：

Const h=（type，props， children）=＆gt; （{type，props，children}）; export default h（'svg'，{width:'300'，height:'300'}，h（'rect'，{bindtap:'tampHandler'，x:'0' ，y:'0'，高度:'110'，宽度:'110'，样式:'笔划: #ff0000;填充:＃0000ff'}））;复制代码

总结:

您可以使用SVG文件直接在mps中使用SVG。您可以直接在omip中使用JSX。您可以使用htm直接在本机小程序中使用SVG。 这完了吗？远非如此，请查看小程序中的cax示例：

详细代码:

renderSVG（html``，'svg-c'，this）复制代码

试试着名的SVG Tiger:

路径太长，没有发布代码，您可以点击此处查看

就这些？继续.后续补充:

pasiton 标签import { html, renderSVG } from '../../cax/cax'Page({ onLoad: function () { const svg = renderSVG(html``, 'svg-c', this) this.pasitionElement = svg.children[0] }, changePath: function () { this.pasitionElement.toggle() }})复制代码

Pasiton提供了在两种路径和颜色之间切换的能力。最常见的场景是单击菜单按钮和关闭按钮后路径的变形。

例如，同时查看颜色和路径更改：

线性运动

这是在mps:

中使用SVG的情况 Import { renderSVG, To } from '././cax/cax'Page({ tapHandler: function(){ this.pause=!this.pause }, onLoad: function () { const svg=renderSVG(html` ` , 'svg-a', this) const rect=svg.children[0] rect.originX=rect.width/2 rect.originY=rect.height/2 rectapp development

.x=svg.stage.width/2 rect.y=svg.stage.height/2 this.pause=false this.interval=setInterval(()=>{ if(!this.pause){ rect.rotation++ svg .stage.update() } },15)})Copy code

The effect is as follows:

组合运动import { renderSVG, To } from '../../cax/cax'Page({ onLoad: function () { const svg = renderSVG(html` ` ,'svg-a', this) const rect = svg.children[0] rect.originX = rect.width/2 rect.originY = rect.height rect.x = svg.stage.width/2 rect.y = svg.stage.height/2 var sineInOut = To.easing.sinusoidalInOut To.get(rect) .to().scaleY(0.8, 450, sineInOut).skewX(20, 900, sineInOut) .wait(900) .cycle().start() To.get(rect) .wait(450) .to().scaleY(1, 450, sineInOut) .wait(900) .cycle().start() To.get(rect) .wait(900) .to().scaleY(0.8, 450, sineInOut).skewX(-20, 900, sineInOut) .cycle() .start() To.get(rect) .wait(1350) .to().scaleY(1, 450, sineInOut) .cycle() .start() setInterval(() => { rect.stage.update() }, 16) }})复制代码

The effect is as follows:

其他vscode 安装 lit-html 插件使 htm 的 html内容 高亮还希望小程序 SVG 提供什么功能可以开 issues告诉我们，评估后通过，我们去实现！Cax SVG Github参考文档

xx