SVG精髓读书记录-ch1

最新推荐文章于 2022-08-01 11:09:06 发布

vardemy

最新推荐文章于 2022-08-01 11:09:06 发布

阅读量116

点赞数

分类专栏： SVG精髓读书记录文章标签： SVG

本文链接：https://blog.csdn.net/qq_36744349/article/details/79951187

版权

SVG精髓读书记录专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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

<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>