SVG 手工艺

作者: 死宅程序员 | 来源:发表于2015-10-28 15:26 被阅读49次

SVG 手工艺
Android图片之svg
SVG的使用
资源
(第六天)HTML5之SVG的了解与使用&Web数据存储
svg standalone
SVG学习笔记
SVG
SVG简介及其用法
svg实例

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="折线图" xmlns:svg="http://www.w3.org/2000/svg"
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="300px"
     height="300px" viewBox="0 0 600 600" enable-background="new 0 0 600 600" xml:space="preserve">
    <dfs>
        <line id="arrow_left" style="stroke:rgb(0,0,0);stroke-width:5;" x1="0" y1="0" x2="40" y2="0"/>
        <g id="arrow">
            <use xlink:href="#arrow_left" transform="rotate(-55 40,0)"/>
            <use xlink:href="#arrow_left" transform="rotate(235 40,0)"/>
            <line style="stroke:rgb(0,0,0);stroke-width:5;" x1="40" y1="0" x2="40" y2="540"/>
        </g>
    </dfs>
    <use xlink:href="#arrow" x="0" y="0" />
    <polyline points="40,424.408 171.238,291.143 280.37,354.912 533,100" fill="none" stroke-linecap="round" stroke-linejoin="round"></polyline>
    <use xlink:href="#arrow" x="0" y="0" transform="rotate(90 40,540)"/>
</svg>

前戏：想想各种笔画（line、polyline等）画在一个巨大的坐标系上。
剧情：
viewBox：从坐标系上 crop 一个矩形作为视野，即 SVG 的内容
svg.width/svg.height:定义 SVG 在页面中占据的范围
enable-background：不详（用 illustrator 时带出来的属性）
dfs：定义一些基础“组件”，定义不会被显示
use：引用定义中的基础“组件”
g：将基本元素“打包”（分组），以便作为一个整体来操作
transform：变换，rotate(旋转角度，旋转中心x，y)