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
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
android change the denpency on support v7 Apr 12, 2017
demos
ios update Weexplugin Mar 29, 2017
js
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
.gitmodules
LICENSE add new files Feb 8, 2017
README.md update READM.md Apr 10, 2017
RELEASENOTES.md
doc.md update doc Apr 11, 2017
goal.md
package.json add mixin Feb 24, 2017
plugin.xml

README.md

weex-plugin-svg

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

<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.

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

circle

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

line

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

polyline

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

polygon

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

path

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

linear gradient

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

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

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

radial gradient

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

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 .

You can’t perform that action at this time.