-
<script> function target() { return document.getElementById(group.value); } // 把变换命令转换为字符串 // 't 10 10 r 30 s 1.3' => 'translate(10, 10) rotate(30) scale(1.3)' 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>查看全部
-
<style media="screen"> svg{ background-color: #fcfcfc; display: block; margin: 20px auto; border: 1px solid #ccc; } #transform{ width: 300px; } </style>查看全部
-
<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">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>查看全部
-
<fieldset> <legend>设置</legend> <label for="">分组： <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 for="">变换： <input type="text" id="tc" /> <span id="ts"></span> </label> </fieldset>查看全部
-
图形的基本属性查看全部
-
多边形绘制查看全部
-
折线绘制查看全部
-
直线绘制查看全部
-
椭圆绘制查看全部
-
圆形绘制查看全部
-
矩形绘制查看全部
-
基本图形查看全部
-
SVG简介查看全部
-
<ployline>折线查看全部
-
<ellipse>查看全部
举报
0/150
提交
取消