svg

builtin svg component, will render raw svg tag

Example

Page({
  data: {
    localImage: 'pages/tabbar/component/resources/pic/1.jpg',
    remoteImage: 'https://static.devfdg.net/image/julia/pie-chart-currentcolor.svg',
    colorChanged: false,
    svgStyle: '',
    colorClassChanged: false,
    colorClass: ''
  },
  onChangeColor(e) {
    console.log(`[Svg] onChangeColor `, e)
    if (!this.data.colorChanged) {
      this.setData({ colorChanged: true, svgStyle: 'color: #d22f2f;' })
    } else {
      this.setData({ colorChanged: false, svgStyle: '' })
    }
  }
})

bxml

<svg
  src="{{localImage}}"
></svg>

<svg
  src="{{remoteImage}}"
></svg>

<view class='page-section-button' bindclick="onChangeColor">change fill color</view>
<svg
  src="{{localImage}}"
  style="{{svgStyle}}"
></svg>

bxss

Bug & Tip

tip: Svg component default width 320px, height 240px (same with Image componnet)
tip: for keep same code between webview and flutter, recommand not use class to custom svg style
tip: not support fully svg feature (document not ready)
tip: not support flutter render mode (developing)
remark - supported jssdk >= 4.37.0

Props

Name	Type	Description	Default
`style`	`string`	container style	`""`
`svg-style`	`string`	inner svg tag style	`""`
`src` required	`string`	resource url, could be remote or local

svg

Props​

Props