今天小程序正式支持SVG

时间：2021-08-25 来源：互联网编辑：宝哥软件园浏览：次

今天，小程序正式支持SVG

写在前面

经过腾讯Omi团队的努力，今天就可以用Cax引擎在小程序中渲染出高性能的SVG了！

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

SVG使用XML格式定义图形，可由文本编辑器创建和修改。可以搜索、索引、编写脚本或压缩SVG图像。SVG是可伸缩的，放大后的图片质量不会降低。SVG图像可以以任何分辨率高质量打印。SVG可以通过很多工具(如记事本)进行读取和修改。与JPEG和GIF图像相比，SVG体积更小，可压缩性和可编程性更强，完全支持DOM编程，具有交互性和动态性。支持这些优秀特性的前提是需要支持SVG标签。例如，直接在小程序中编写：

SVG width=' 300 ' height=' 150 ' rect bind tap=' tapHandler ' height=' 100 ' width=' 100 ' style=' stroke : # ff 0000；fill : # 0000 ff '/rect/SVG SVG的结构、样式和点击行为如上定义。但是，目前小程序不支持SVG标签，只支持加载SVG并将其显示为背景图像，如背景图像： URL(' data : image/SVG XML.)，或者base64之后的背景图像URL。

那我们该怎么办？有没有办法让小程序支持SVG？答案是肯定的！需要以下东西(站在巨人的肩膀上):

JSX，历史上最强的UI表达，是一个JS语言小程序，支持编写XML和Hyperscript之间的相互转换。它有内置的画布渲染器Cax，最新的渲染引擎HTM和Hyperscript标记标记，这可能是JSX的替代品或另一种选择。使用ES标准模板语法的Hyperscript运行时/编译时生成。preact作者(也是谷歌工程师)在此创建，用于稍微解释一下Hyperscript:

例如在JSX

Div Hello {this.props.name}/div或js中的htm:

html ` div hello { this . props . name }/div `最终会编译成：

h('div '，null，' Hello '，this . props . name)；嵌套的div也会编译成h嵌套的h，比如

div div BC/div/div编译：

H('div '，null，h('div '，null，' abc ')和h函数的定义也相当简洁3360

函数h(类型、道具、children) {return {type，props，children}}可以通过h的执行来获取js中的结构化数据，称为虚拟dom。需要注意的是，htm有轻微的运行时开销，但是jsx没有。

用一句话来概括：

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

直接看小程序用例：

从导入{ html，renderSVG }././CAX/CAX ' page({ onload : function(){ renderSVG(html ` SVG width=' 300 ' height=' 220 ' rect bind tap=' tapHandler ' height=' 110 ' width=' 110 ' style=' stroke : # ff 0000；wxml id : # cccfftransform=' translate(100 50)rotate(45 50 50)'/rect/SVG `，' svg-a '，this)}，taphandler 3360 function(){ console . log('您单击了rect') }}

视图类=“容器”CAX元素id=“SVG-c”/CAX元素/视图声明了组件依赖关系

效果：显示在{ '使用组件' : {'CAX元素' 3360 '中././CAX/索引' }}小程序

您可以使用宽度、高度、边界x和边界y来设置绑定事件的范围，例如：

path width=' 100 ' height=' 100 ' bounds-x=' 50 ' bounds-y=' 50 '/需要注意的是，元素的事件触发边界框受自身或其父节点的变换影响，因此不是绝对坐标的rect触发器区域。

另一个复杂的例子是用SVG绘制Omi的logo:

renderSVG(html ` SVG宽度=' 300 '高度=' 220 ' g变换=' translate(50，10)scale(0.20.2)'圆形填充=' # 07c 160 ' CX=' 512 ' cy=' 512 ' r=' 512 '/多边形填充='白色点数='159.97，807.8 338.71，532.42 509.9，829。62 512小程序种显示效果：

在海洋模式比较计划和米/秒(米每秒的缩写)当中使用计算机辅助技术渲染svg，你可以不用使用htm。比如在海洋模式比较计划中实现上面两个例子：

渲染SVG(svg宽度='300 '高度='220' rect bindtap='tapHandler '高度='110 '宽度=' 110 '样式=' stroke : # ff 0000fill : # ccccff ' transform=' translate(100 50)rotate(45 50 50)'/rect/SVG，' svg-a '，这个$ scope)renderSVG(SVG宽度=' 300 '高度=' 220 ' g变换=' translate(50，10)比例(0.20.2)'圆填充=' # 07c 160 ' CX=' 512 ' cy=' 512 ' r=' 512 '/多边形fill='white' points='159.97，807.8 338.71，532.42 509.9，829。62 512美元范围)需要注意的是在海洋模式比较计划中传递的最后一个参数不是这个，而是这个$scope。

在米/秒(米每秒的缩写)中，更加彻底，你可以单独创建挽救(保存的简写)文件，通过进口导入。

//注意这里不能写test.svg，因为米/秒(米每秒的缩写)会把test.svg编译成test.js从testSVG导入'././SVG/测试"从导入{ renderSVG }././CAX/CAX的页面({ taphandler : function(){ this。暂停=！this.pause }、onLoad:函数(){ renderSVG(testSVG，' svg-a '，this) })比如test.svg:

SVG width=' 300 ' height=' 300 ' rect bind tap=' tapHandler ' x=' 0 ' y=' 0 ' height=' 110 ' width=' 110 ' style=' stroke : # ff 0000；填充： # 0000 ff/SVG会被米/秒(米每秒的缩写)编译成：

const h=(类型，道具，儿童)=({类型、道具、儿童});导出默认h('svg '，{ width: '300 '，height: '300' }，h('rect '，{ bindtap: 'tapHandler '，x: '0 '，y: '0 '，height: '110 '，width: '110 '，style : ' stroke : # ff 000000 fill 3: # 0000 ff ' })。所以总结一下：

你可以在米/秒(米每秒的缩写)中直接使用进口的挽救(保存的简写)文件的方式使用挽救(保存的简写)你可以直接在海洋模式比较计划中使用小艾的使用挽救(保存的简写)你可以直接在原生小程序当中使用超文本标记语言文件的后缀的方式使用挽救(保存的简写)这就完了？远没有，看计算机辅助技术在小程序中的这个例子：

详细代码：

renderSVG(html`svg宽度='300 '高度='200 '路径d='M 256，213 C 245，181 206，187 234，262 147，181 169，71.2 233，18 220，56 235，81 283，88 285，78.7 286，69.3 288，60 289，61.3 fill : black ' animate dur=' 32s '重复计数='不定attributeName='d '个值='.太长，这里省略路径."//路径/svg `，' svg-c '，这个)再试试著名的挽救(保存的简写)老虎：

小路太长，就不贴代码了，可以点击这里查看

就这么多？未完待续.后续补充：

帕西顿标签

从导入{ html，renderSVG }././CAX/CAX '页面({ onload : function(){ const SVG=renderSVG(html ` SVG width=' 200 ' height=' 200 ' pastion duration=' 200 ' bind tap=$ { this。将路径}宽度=' 100 '高度=' 100 '从=' m 28 '更改为。228，23.986L47.092，5.122c1.172-1.171，1.172提供了两个小路和颜色相互切换的能力，最常见的场景比如菜单按钮和关闭按钮点击后小路的变形。

举个例子，看颜色和小路同时变化：

线性运动

这里举一个在米/秒(米每秒的缩写)中使用挽救(保存的简写)的案例：

从导入{渲染SVG，到}././CAX/CAX的页面({ taphandler : function(){ this。暂停=！this.pause }，OnLoad : function(){ const SVG=renderSVG(html ` SVG width=' 300 ' height=' 300 ' rect bind tap=' TapHandler ' x=' 0 ' y=' 0 ' height=' 110 ' width=' 110 ' style=' stroke : # ff 0000；填充： # 0000 ff '/SVG `，' svg-a '，这)const rect=SVG。子[0]矩形。originx=rect.width/2雷特。originy=rect.height/2 rect。x=svg.stage.width/2 rect。y=svg.stage.height/2这个。pause=false this。interval=setInterval(()={ if(！这个。暂停){ rect。旋转SVG。舞台。update()} }，15)})效果如下：

组合运动

从导入{渲染SVG，到}././CAX/CAX '页面({ onload : function(){ const SVG=renderSVG(html ` SVG width=' 300 ' height=' 300 ' rect bind tap=' tapHandler ' x=' 0 ' y=' 0 ' height=' 110 ' width=' 110 ' style=' stroke : # ff 0000；填充： # 0000 ff '/SVG `，' svg-a '，这)const rect=SVG。子[0]矩形。originx=rect.width/2雷特。originy=rect。身高正常。x=svg.stage.width/2 rect。y=svg.stage.height/2 var sineInOut=to。放松。辛纳利诺。获得.至()。scaleY(0.8，450，正弦输出)。偏斜(20,900,正弦输出)。等待(900)。循环()。开始（到)得到（直)。等待(450)。至()。scaleY(1，450，sineInOut).等待(900)。循环()。开始（到)得到（直)。等待(900)。至()。scaleY(0.8，450，正弦输出)。skewX(-20，900，sineInOut).循环()。开始（到)得到（直)。等待(1350)。至()。scaleY(1，450，sineInOut).循环()。start()setInterval(()={ rect。舞台。update()}，16) })效果如下：