亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全，請及時綁定郵箱和手機立即綁定
transform.html源代碼 求下載地址

正在回答

3 回答

謝謝，很有用


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

這里老師沒給代碼 我補充一下

0 回復 有任何疑惑可以回復我~ 
<!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
  • 參與學習       52694    人
  • 解答問題       223    個

SVG是HTML5 中矢量圖的標記語言，學習后掌握更多的干貨

進入課程
微信客服

購課補貼
聯系客服咨詢優惠詳情

 幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

 公眾號

掃描二維碼
關注慕課網微信公眾號