智库软件站:纯净手机游戏下载网站
首页 手机软件 手机游戏 电脑软件 软件教程
weex plugin svg插件下载

weex plugin svg插件下载

  • 类型:电脑软件
  • 评分:
  • 版本: v0.1.0官方版
  • 语言:简体中文
  • 大小: 145
  • 更新:2017-12-04

内容介绍

如果需要在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 来进行填充和描边

 

火爆手游