用svg实现扁平化图标中的阴影(inkscape)

现在很多APP的图标都是扁平化风格,就像这样:

 

我试过用inkscape来画这样的图标,虽然可以利用inskcape提供的各种交并集操作实现类似的阴影效果,但是放大后总会看到某些边缘处没有完美对齐.

 

一种思路是编辑svg文件,修改坐标参数即可.

 

实现效果如下("方底"的阴影较为容易,就不提了):

 

 

svg源代码如下:

 

<g

     inkscape:label="Layer 1"

     inkscape:groupmode="layer"

     id="layer1">

    <circle

       style="fill:#72507f;fill-opacity:0.94117647;stroke:none;stroke-width:6;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"

       id="path1"

       cx="0"

       cy="0"

       r="50" />

    <path

       style="fill:#000000;fill-opacity:0.24313726;stroke:none;stroke-width:6;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"

       d="M 50 0 L 30 -20   L -30 20  L 0 50      A 50, 50  0    0 0   50 0    z "

       id="path2" />

    <rect

       style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:4;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"

       id="rect4133"

       width="60"

       height="40"

       x="-30"

       y="-20" />

  </g>

　　

 <path/> 中的A符号,其全称是"elliptical arc"(详细介绍: http://www.w3.org/TR/SVG/paths.html).