Post

SVG note

不是前端,但为了在不同的 3D 建模软件中复用装饰性的浮雕,学了些 SVG。


SVG 对有理工科背景的很好懂,well- documented.
简单参照 cheat sheet,更复杂的需求和细节查 MDN 之类的文档。

例子:

Example fillrule-evenodd - demonstrates fill-rule:evenodd

一些坑:

SVG 一般有 shape 和 path 两种绘制方法。一些简单图形用 shape 会稍微方便些,但在图形中挖洞的操作,用 shape 时一些建模软件的支持很差,无法正确识别挖出的洞,得手动调整,或者用 Inkscape 之类的软件转换后使用,反而会更麻烦,所以还是直接画 path 吧。

成品:



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<svg width="152" height="144">
  <path
    fill="white"
    fill-rule="evenodd"     
    stroke-width="0"    
    d="M 0,72
        A 76,72 0,0,1 152,72
        A 76,72 0,0,1 0,72

        M 38 78
        L 57 78
        L 57 97
        L 38 97
        L 38 78

        M 95 97
        L 114 97
        L 114 78
        L 95 78
        L 95 97

        M 57 97    
        L 95 97  
        L 95 116
        L 57 116
        L 57 97

        M 38 40
        L 57 40
        L 57 59
        L 38 59
        L 38 40

        M 95 40
        L 114 40
        L 114 59
        L 95 59
        L 95 40

       " />
</svg>
This post is licensed under CC BY 4.0 by the author.

Comments powered by Disqus.