在Taro中开发一个跨端Svg组件，同时支持小程序、H5、React Native

Taro系列中一直没有跨端的绘图工具，小程序端支持canvas但是不支持svg，RN端有 react-native-svg 支持svg，但是没有很好原生的canvas插件，社区的canvas都是基于WebView实现的，或者skia，这个插件的书写方式和canvas有较大的差异

所以开发了这个兼容小程序、H5和React Native 的Svg组件，来实现跨端绘图

前言

在小程序上面，是不支持直接编写svg代码的，但是有间接的方式让他支持，就是使用Image渲染svg，或者使用css的背景图渲染一个svg，但是这样写有一定的局限性，例如要支持动画、组件事件，将svg保存到本地等都无法实现

所以我选择了使用Canvas来模拟开发svg的相关组件支持，在RN端则是使用现在已经有的 react-native-svg 这个插件，因此我们只需要在小程序和H5端模拟 react-native-svg 组件的功能，组件属性及其功能完全按照 react-native-svg 规范进行开发

当前组件属性支持

Svg中有大量的组件，用来绘制各种图形或者图片

已经支持的组件

• Svg
  width height viewBox preserveAspectRatio
• Rect
  x y width height
• Circle
  cx cy r
• Ellipse
  cx cy rx ry
• Line
  x1 y1 x2 y2
• Image
  x y width height preserveAspectRatio
• Text
  x y dx dy fontSize fontWeight fontFamily textAnchor fontStyle
• TSpan
  x y dx dy fontSize fontWeight fontFamily textAnchor fontStyle
• Polyline
  points