weex plugin svg插件下载

如果需要在weex中使用SVG，就需要用到这个插件了，plugin-svg插件是必不可少的一款插件，近几年 SVG 逐渐成为前端开发的热门技术。我们可以在业务场景中构建我们的图标，以及替代部分位图，随着动画交互的普及，SVG 也成为了大家的选择之一。今天我们给大家带来如何在 weex 项目中通过 weex-svg 来实现 SVG 的一些图形信息的展示。

rect 矩形

circle 圆形

path 路径

polyline 折线

polygon 几何形

line 直线

linear-gradient 线性渐变

radial-gradient 径向渐变

fill 颜色填充

stroke 描边的颜色

stroke-width 描边的宽度

a weex plugin to support svg for Web/iOS/Andoid

Preview demo

// if you didn't install weex-toolkit

npm install weex-toolkit@beta -g

git clone https://github.com/weex-plugins/weex-plugin-svg.git

cd weex-plugin-svg

weex demos --entry demo/index.vue

How to use

SVG elements

rect

The rect element is an SVG basic shape, used to create rectangles based on the position of a corner and their width and height.

circle

The circle element is an SVG basic shape, used to create circles based on a center point and a radius.

line

The line element is an SVG basic shape used to create a line connecting two points.

polyline

The polyline element is an SVG basic shape that creates straight lines connecting several points.

polygon

The polygon element defines a closed shape consisting of a set of connected straight line segments.

path

The path element is the generic element to define a shape. All the basic shapes can be created with a path element.

linear gradient

The linearGradient element lets users define linear gradients to fill or stroke graphical elements.

x1="0%" y1="0%"

x2="0%" y2="100%"

spreadMethod="pad">

style="fill:url(#myLinearGradient1);" />

radial gradient

fx="50%" fy="50%" r="45%"

spreadMethod="pad">

SVG props

fill

stroke

Weex-svg 目前已经对 rect ，circle，path，polyline，polygon，linear-gradient，radial-gradient 的支持，考虑在下一版本继续完善，因此在使用的时候，目前只能解析上面的那些元素。

rect

绘制矩形，你可以通过 x，y 来设置矩形的起点，你可以通过 width 和 height 来设置矩形的大小，你可以通过fill 和 stroke 来进行填充和描边