今天,小程序正式支持SVG

　　

今天,小程序正式支持SVG

　　

写在前面

　　

经过腾讯Omi团队的努力,今天你可以在小程序中使用Cax引擎高性能渲染SVG !

　　

SVG是可缩放矢量图形(可伸缩向量图形),基于可扩展标记语言,用于描述二维矢量图形的一种图形格式。它由万维网联盟制定,是一个开放标准. SVG的优势有很多:

　　

　　<李> SVG使用XML格式定义图形,可通过文本编辑器来创建和修改李 　　<李> SVG图像可被搜索,索,引脚本化或压缩李 　　<李> SVG是可伸缩的,且放大图片质量不下降李 　　<李> SVG图像可在任何的分辨率下被高质量地打印 　　<李> SVG可被非常多的工具读取和修改(比如记事本) 　　<李> SVG与JPEG和GIF图像比起来,尺寸更小,且可压缩性,可编程星更强李 　　<李> SVG完全支持DOM编程,具有交互性和动态性李 　　

　　

而支持上面这些优秀特性的前提是,需要支持SVG标签。比如在小程序中直接写:

　　 　　 　　& lt; svg宽度==?50”“300”高度比; 　　& lt;矩形 　　bindtap=" tapHandler "高度=" 100 "宽度=" 100 " 　　比; 　　& lt;/rect> 　　& lt;/svg> 　　之前 　　 　　

上面定义了SVG的结构,样式和点击行为。但是小程序目前不支持SVG标签,仅仅支持加载SVG之后作为背景图像进行展示,如背景图片:url(“数据:图像/SVG + xml .......),或者base64后作为背景图像的url。

　　

那么怎么办呢?有没有办法让小程序支持svg # 63;答案是有的!需要下面这些东西(站在巨人的肩膀上):

　　

　　<李> SX,史上最强UI表达式,支持书写XML-Hyperscript互转的JS语言李 　　<李>小程序内置帆布渲染器李 　　<李> Cax最新渲染引擎李 　　<李> HTM, Hyperscript标记的标记,可能是JSX的替代品或者另一种选择,使用西文标准的模板语法实现的Hyperscript运行时/编译时生成,提前作者(也是谷歌工程师)打造李 　　

　　

这里稍微解释下Hyperscript:

　　

比如JSX中的

　　 　　 　　& lt; div> 　　你好{this.props.name} 　　& lt;/div> 　　 　　

或者js中的htm:

　　 　　 　　html的& lt; div> 　　你好{this.props.name} 　　& lt;/div> 　　 　　

最后都会被编译成:

　　 　　 　　h ( 　　" div ", 　　空, 　　“你好”, 　　this.props.name 　　); 　　 　　

嵌套的div也会变编译成h嵌套h,比如

　　 　　 　　& lt; div> 　　& lt; div> abc