SVG

来源：互联网发布：sql server 费用编辑：程序博客网时间：2024/06/02 02:09

什么是SVG？

1. SVG指可绳索矢量图形(Scalable Vector Grapics)；

2. SVG用来定义用于网络的基于矢量的图形；

3. SVG使用xml格式定义图像；

4. SVG图像在放大或改变尺寸的情况下，其图形质量不会有所损失；

5. SVG是W3C的标准；

6. SVG与诸如DOM和XSL之类的W3C标准是一个整体。

更加详细的介绍可以查看这个网址：http://http://www.runoob.com/svg/svg-example.html

SVG官方地址：http://www.w3.org/TR/SVG11/paths.html#PathData

说都多了也没用，下面通过代码来说明Android如何使用SVG。

一、android显示自定义的SVG资源

1. 在drawable文件夹下面创建一个新的文件 -- vector_true.xml

<?xml version="1.0" encoding="utf-8"?><vector xmlns:android="http://schemas.android.com/apk/res/android"        android:width="300dp"        android:height="300dp"        android:viewportHeight="10"        android:viewportWidth="10"    >    <!--    android:strokeWidth="0.3" : 线段的宽度    android:strokeColor="#fff" ： 线段的颜色    android:fillColor="" : 填充的颜色    android:trimPathEnd="0.8" : 从开始绘制的百分比    android:trimPathStart="0.2": 从开始去掉的百分比    android:strokeLineJoin="round" :线段连接处的模式    android:strokeLineCap="round" :线段其他处的模式    -->    <path        android:name="right"        android:strokeWidth="0.3"        android:strokeColor="#fff"        android:strokeLineJoin="round"        android:strokeLineCap="round"        android:pathData="M 1,5 L 3,8 L 8,2"        /></vector>

2. activity_main.xml

<?xml version="1.0" encoding="utf-8"?><RelativeLayout    xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    tools:context="com.czj.svgdemo.MainActivity">    <ImageView        android:onClick="btnClick"        android:id="@+id/iv"        android:background="#f00"        android:src="@drawable/<span style="font-size: 14px;">vector_true</span>"        android:layout_width="100dp"        android:layout_height="100dp"        /></RelativeLayout>

运行的效果如下所示：

<img src="http://img.blog.csdn.net/20161030222633751?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" />

二、通过上面的SVG矢量图来实现一个动画效果

1. <pre name="code" class="html" style="font-size: 14px;">animator/animator.xml

<pre name="code" class="html"><?xml version="1.0" encoding="utf-8"?><objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"                android:duration="2000"                android:valueType="floatType"                android:propertyName="trimPathEnd"                android:valueFrom="0"                android:valueTo="1"    ></objectAnimator>

2. drawable/animated_show.xml

<pre name="code" class="html" style="font-size: 14px;"><?xml version="1.0" encoding="utf-8"?><animated-vector xmlns:android="http://schemas.android.com/apk/res/android"     android:drawable="@drawable/vector_right">    <target        android:animation="@animator/animator"        android:name="right"/></animated-vector>

<p><span style="font-size: 14px;">3. 在drawable文件夹下面创建一个新的文件 -- vector_true.xml</span></p><p><span style="font-size: 14px;"></span></p><pre name="code" class="html"><?xml version="1.0" encoding="utf-8"?><vector xmlns:android="http://schemas.android.com/apk/res/android"        android:width="300dp"        android:height="300dp"        android:viewportHeight="10"        android:viewportWidth="10"    >    <!--    android:strokeWidth="0.3" : 线段的宽度    android:strokeColor="#fff" ： 线段的颜色    android:fillColor="" : 填充的颜色    android:trimPathEnd="0.8" : 从开始绘制的百分比    android:trimPathStart="0.2": 从开始去掉的百分比    android:strokeLineJoin="round" :线段连接处的模式    android:strokeLineCap="round" :线段其他处的模式    -->    <path        android:name="right"        android:strokeWidth="0.3"        android:strokeColor="#fff"        android:strokeLineJoin="round"        android:strokeLineCap="round"        android:pathData="M 1,5 L 3,8 L 8,2"        /></vector>

说明：要让SVG资源有动画效果，需要有三个资源。一个是animator_vector 资源；

<strong><span style="font-size:18px;">一个是</span><span style="font-family:Arial, Helvetica, sans-serif;"><span style="font-size: 14px;">objectAmaintor属性动画资源；一个是SVG资源。</span></span></strong>

<strong><span style="font-family:Arial, Helvetica, sans-serif;"><span style="font-size: 14px;"></span></span></strong><pre name="code" class="html" style="font-size: 14px;">animated-vector资源即上面的<span style="font-family: monospace; font-size: 14px; white-space: pre; background-color: rgb(240, 240, 240);">animated_show.xml必须自定一个默认的</span>

<span style="font-family: monospace; font-size: 14px; white-space: pre; background-color: rgb(240, 240, 240);">资源 -- 如上面所示<span style="font-family: monospace; white-space: pre; background-color: rgb(240, 240, 240);">android:drawable="@drawable/vector_right"。</span></span><span style="font-family: Arial, Helvetica, sans-serif;">否则会报错。</span>

<span style="font-family: Arial, Helvetica, sans-serif;"></span><pre name="code" class="html" style="font-size: 14px;">animated_show.xml中target标签的名字必须和vector_true.xml中的path标签的名字一致，否则会没有动画效果。

</pre><pre name="code" class="html"><span style="font-family:Arial, Helvetica, sans-serif;"><span style="font-size: 14px;"></span></span><pre name="code" class="html" style="font-size: 14px;"><span style="font-family: Arial, Helvetica, sans-serif; font-size: 12px;"><span style="font-family:Arial, Helvetica, sans-serif;"><span style="font-size: 14px;"></span></span></span>

4. MainActivity.java

<span style="font-family:Arial, Helvetica, sans-serif;"><span style="font-size: 14px;"></span></span><pre name="code" class="html">public class MainActivity extends AppCompatActivity {    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);    }    public void btnClick(View view){        ImageView iv = (ImageView) view;        AnimatedVectorDrawable animate = (AnimatedVectorDrawable) iv.getDrawable();        animate.start();    }}

</pre><pre name="code" class="html"><strong style="font-size:18px; font-family: Arial, Helvetica, sans-serif;"></strong><span style="font-size:18px;"><strong></strong></span><span style="font-size: 14px;"></span>

0 0