weex-plugin-svg
a weex plugin to support svg for Web/iOS/Andoid
Preview demo
// if you didn't install weex-toolkitnpm install weex-toolkit@beta -ggit clone https://github.com/weex-plugins/weex-plugin-svg.gitcd weex-plugin-svgweex demos --entry demo/index.vue
How to use
<template><div class="page"><svg style="width:300px;height:300px;"><rect x="20" y="20" rx="22.5" ry="22.5" width="100" height="45" fill="#ea6153"/></svg></div></template<style>.page{flex: 1;}</style>
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.
radial gradient
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
<svg style="width:300px;height:300px;"><circle cx="50" cy="50" r="45" style="fill:#ea6153;"/><circle cx="100" cy="50" r="45" style="fill:#9b59b6;"/><circle cx="150" cy="50" r="45" style="fill:#2ecc71;"/></svg>
stroke
<svg style="width:300px;height:300px;"><circle cx="50" cy="50" r="20" fill="none" stroke="#ea6153"/><circle cx="100" cy="50" r="20" fill="none" stroke="#9b59b6"/><circle cx="150" cy="50" r="20" fill="none" stroke="#2ecc71" stroke-width="2"/></svg>
If you want to learn more about SVG , we suggest you read SVG Tutorial-Jakob Jenkov .