Android XML转换SVG
浏览 1688 | 评论 0 | 字数 2230
苏lisong
2021年04月17日
  • 方法

    1.将头部替换:

    <?xml version="1.0" encoding="utf-8"?>
    <vector xmlns:android="http://schemas.android.com/apk/res/android"
    ...
    ...
    </vector>

    替换

    <svg xmlns="http://www.w3.org/2000/svg"
    ...
    ...
    </svg>

    2.将android:viewportHeight="24" android:viewportWidth="24"替换成viewBox="0 0 24 24"的形式;

    3.将android:width替换成width;

    4.将android:height替换成height;

    5.将android:pathData替换成d;

    6.将android:fillColor替换成fill;

    7.将android:fillAlpha替换成opacity;

    8.将android:strokeAlpha替换成stroke-opacity;

    9.将android:strokeColor替换成stroke;

    10.将android:strokeWidth替换成stroke-width;

    11.渐变属性替换:

    <aapt:attr name="fill">
     <gradient android:endX="175.4" android:endY="391.4"
      android:startX="175.4" android:startY="616.55" android:type="linear">
       <item android:color="#3F808080" android:offset="0"/>
       <item android:color="#1E808080" android:offset="0.54"/>
       <item android:color="#19808080" android:offset="1"/>
     </gradient>
    </aapt:attr>

    替换

    <defs>
      <linearGradient x2="175.4" y2="391.4" x1="175.4" y1="616.55">
        <stop stop-color="#808080" stop-opacity = "0.25" offset="0"/>
        <stop stop-color="#808080" stop-opacity = "0.15" offset="0.54"/>
        <stop stop-color="#808080" stop-opacity = "0.1" offset="1"/>
      </linearGradient>
    </defs>

    例子

    Vector Drawable:

    <vector android:autoMirrored="true" android:height="730dp"
        android:viewportHeight="729.87" android:viewportWidth="1046"
        android:width="1046dp" xmlns:android="http://schemas.android.com/apk/res/android">
        <path android:fillAlpha="0.1" android:fillColor="#6c63ff"
            android:pathData="M417.15,93.3A246.62,246.62 0,0 0,120.81 59.93C215.79,93.93 320.59,95.18 417.15,93.3Z" android:strokeAlpha="0.1"/>
    ...
    ...
    </vector>

    SVG:

    <svg xmlns="http://www.w3.org/2000/svg"
        width="1046" 
        height="729.87" 
        viewBox="0 0 1046 729.87" >
        <path opacity="0.1" fill="#6c63ff"
            d="M417.15,93.3A246.62,246.62 0,0 0,120.81 59.93C215.79,93.93 320.59,95.18 417.15,93.3Z" stroke-opacity="0.1"/>
    ...
    ...
    </svg>
    本文作者:苏lisong
    本文链接:https://sulisong.cn/index.php/archives/13/
    最后修改时间:2021-04-17 16:07:04
    本站未注明转载的文章均为原创,并采用 CC BY-NC-SA 4.0 授权协议,转载请注明来源,谢谢!
    评论已关闭
    评论列表
    暂无评论