SVG精髓读书记录-ch1

一个感觉是,矢量图像是描边而栅格图形是涂像素点。

<line>画直线

使用<use>复用分组并可用transform转换。translate平移,scale缩放

<polyline>折线
<path>路径

<text>文本

第一章实例:

<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="148" height="170" xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
<title>cat</title>
    <desc>stick figure od a cat</desc>
    <!--在此处绘制图像-->
    <circle cx="70" cy="95" r="50" style="stroke:black; fill:none"></circle>
    <circle cx="55" cy="80" r="5" style="stroke:black fill:#339933"></circle>
    <circle cx="85" cy="80" r="5" style="stroke:black fill:#339933"></circle>
    <g id="whiskers">
        <line x1="75" y1="95" x2="135" y2="85" style="stroke:black"></line>
        <line x1="75" y1="95" x2="135" y2="105" style="stroke:black"></line>
    </g>
    <use xlink:href="#whiskers" transform="scale(-1 1) translate(-140 0)"></use>
    
    <polyline points="108 62, 90 10, 70 45, 50, 10, 32, 62" style="stroke:black; fill:none"></polyline>
    <polyline points="35 110,45 120, 95 120,105,110" style="stroke:red;fill:none;"></polyline>
    
    <path d="M 75 90 L 65 90 A 5 10 0 0 0 75 90" style="stroke:black;fill:#ffcccc"></path>
    
    <text x="60" y="165" style="font-family:sans-serif; font-size:14pt;stroke:none;fill:black;">cat</text>
</svg>

阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页