transform.html源代码求下载地址 -慕课网

transform.html源代码求下载地址

洪炉百炼生

2014-10-06

源自：走进SVG 2-5

关注问题我要回答

1108

操作

收起

3 回答

何烨坪
2015-06-06

谢谢，很有用

0 回复有任何疑惑可以回复我~

收起回答

洪炉百炼生提问者
2014-10-07

这里老师没给代码我补充一下

0 回复有任何疑惑可以回复我~

收起回答

洪炉百炼生提问者
2014-10-07

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style type="text/css">
    svg{
        background:#FCFCFC;
        display: block;
        margin: 20px auto;
        border: 1px solid #CCC;
    }
    #transform{
        width: 300px;
    }
</style>
</head>
<body>
<fieldset>
    <legend>set</legend>
    <label>group:
        <select id="group">
            <option value="a">a</option>
            <option value="b">-b</option>
            <option value="c">--c</option>
            <option value="d">-d</option>
        </select>
    </label>
    <label>change
        <input id="tc" type="text" />
        <span id="ts"></span>
    </label>
</fieldset>  
<svg xmlns="http;//www.w3.org/2000/svg" width="1000" height="600" viewBox="-200.5 -100.5 1000 600">
    <defs>
        <g id="coord">
            <line x1="0" y1="0" x2="300" y2="0" />
            <line x1="0" y1="0" x2="0" y2="300" />
            <circle    cx="0" cy="0" r="2" />
            <circle    cx="100" cy="0" r="2" />
            <circle    cx="200" cy="0" r="2" />
            <circle    cx="0" cy="100" r="2" />
            <circle    cx="0" cy="200" r="2" />
        </g>
    </defs>
    <use xlink:href="#coord" stroke='black' fill="black" />
    <text fill="black" x="5" y="20">hello,world!</text>
 
    <g id="a" stroke="red" fill="red">
        <use xlink:href="#coord"/>
        <text x="5" y="20">a</text>
         
        <g id="b" stroke="blue" fill="blue">
            <use xlink:href="#coord"/>
            <text x="5" y="20">b</text>
 
            <g id="c" stroke="green" fill="green">
                <use xlink:href="#coord"/>
                <text x="5" y="20">c</text>
            </g>
        </g>
 
        <g id="d" stroke="pink" fill="pink">
            <use xlink:href="#coord"/>
            <text x="5" y="20">d</text>
        </g>
    </g>
 
</svg>
<script type="text/javascript">
    function target(){
        return document.getElementById(group.value);
    }
 
    function tc2ts(tc){
        var arr = (tc || '').split(' ');
        var ts = '';
        var elem,lastElemType;
        var cmd = {
            't':'translate(',
            'r':'rotate(',
            's':'scale(',
            'm':'matrix('
        };
 
        while(elem = arr.shift()){
            if(cmd[elem]){
                if(lastElemType == 'number') ts +=') ';
                ts += cmd[elem];
                lastElemType = 'command';
            }else{
                if(lastElemType == 'number') ts += ', ';
                ts += elem;
                lastElemType = 'number';
            }
        }
 
        if(ts.length) ts += ')';
        return ts;
    }
 
    group.oninput = function(){
        tc.value = target().tc || '';
        ts.innerHTML = tc2ts(tc.value);
    };
 
    tc.oninput = function(){
        target().tc = tc.value;
        target().setAttribute('transform',ts.innerHTML = tc2ts(tc.value));
    }
 
</script>
</body>
</html>

3 回复有任何疑惑可以回复我~

收起回答

0/150

提交

取消

走进SVG

参与学习 52663 人
解答问题 213 个

SVG是HTML5 中矢量图的标记语言，学习后掌握更多的干货

进入课程

本课相似问答

1 回答喜欢该老师的讲课方式

2 回答怎样沿椭圆移动

2 回答文本自动换行

1 回答圆角矩形创建

2 回答没有代码吗最后慕课网文字的那个

搜索更多本课相关问答

我要回答关注问题

热搜

最近搜索清空

3 回答

本课相似问答