应用介绍
如果需要在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
Demos
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
| props | exmaple | Description |
|---|---|---|
| fill | #1ba1e2 | For shapes and text, the fill attribute is a presentation attribute that define the color of the interior of the given graphical element |
| stroke | green | The stroke attribute defines the color of the outline on a given graphical element. The default value for the stroke attribute is none |
| strokeWidth | 2 | The strokeWidth attribute specifies the width of the outline on the current object |
| x | 20 | Translate distance on x-axis. |
| y | 20 | Translate distance on y-axis |
fill
stroke
组件使用
Weex-svg 目前已经对 rect ，circle，path，polyline，polygon，linear-gradient，radial-gradient 的支持，考虑在下一版本继续完善，因此在使用的时候，目前只能解析上面的那些元素。
rect
绘制矩形，你可以通过 x，y 来设置矩形的起点，你可以通过 width 和 height 来设置矩形的大小，你可以通过fill 和 stroke 来进行填充和描边
