Skip to content
This repository has been archived by the owner. It is now read-only.
SVG For Apache Weex is a third party plugin, and is not developed nor maintained by Apache Weex.
Java Objective-C Vue Ruby JavaScript
Branch: master
Clone or download
Latest commit 7f5b919 Apr 12, 2017
Type Name Latest commit message Commit time
Failed to load latest commit information.
android change the denpency on support v7 Apr 12, 2017
ios update Weexplugin Mar 29, 2017
screenshots update demo Feb 8, 2017
web add new vue files Feb 14, 2017
.eslintrc.json add new files Feb 8, 2017
.gitignore add new files Feb 8, 2017
LICENSE add new files Feb 8, 2017 update Apr 10, 2017 update doc Apr 11, 2017
package.json add mixin Feb 24, 2017


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

cd weex-plugin-svg

weex demos --entry demo/index.vue


How to use

  <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"/> 

    flex: 1;

SVG elements


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

<svg style="width:300px;height:300px;">
  <rect x="20" y="20" width="160" height="160" fill="#f39c12"/> 


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

<svg style="width:300px;height:300px;">
  <circle cx="150" cy="50" r="45" fill="none" stroke-width="2" stroke="#ea6153"/>


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

<svg style="width:300px;height:300px;">
  <line x1="10" y1="70" x2="120" y2="70" stroke="#ea6153" stroke-width="2" />
  <line x1="70" y1="10" x2="70" y2="120" stroke="#ea6153" stroke-width="2" />


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

<svg style="width:300px;height:300px;">
  <polyline points="0,0 100,0 100,100" fill="#ea6153"></polyline>            


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

<svg style="width:300px;height:300px;">
  <polygon  points="0,30 50,0 70,30 70,60 50,80 0,60" />           


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

<svg style="width:300px;height:300px;">
  <path d="M50,50 A50,50 0 0,1 150,80" stroke="#e84c3d" fill="none" />           

linear gradient

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

<svg style="width:300px;height:300px;">
    <linearGradient id="myLinearGradient1"
                    x1="0%" y1="0%"
                    x2="0%" y2="100%"
      <stop offset="0%"   stop-color="#3498db"/>
      <stop offset="100%" stop-color="#2980b9"/>

  <rect x="10" y="10" width="75" height="100" rx="10" ry="10"
     style="fill:url(#myLinearGradient1);" />          

radial gradient

<svg style="width:300px;height:300px;">
    <radialGradient id="myRadialGradient4"
       fx="50%" fy="50%" r="45%"
      <stop offset="0%"   stop-color="#a8dff9" stop-opacity="1"/>
      <stop offset="100%" stop-color="#1fb5fc" stop-opacity="1" />
  <rect x="20" y="10" width="100" height="100" rx="10" ry="10" fill="url(#myRadialGradient4)" />         

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


<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 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"/>  

If you want to learn more about SVG , we suggest you read SVG Tutorial-Jakob Jenkov .

You can’t perform that action at this time.