请马上登录,朋友们都在花潮里等着你哦:)
您需要 登录 才可以下载或查看,没有账号?立即注册
x
<style>
#tz { margin: 30px; text-align: center; }
#tz svg { outline: 1px dotted gray; }
#tz textarea { width: 800px; height: 260px; padding: 10px; tab-size: 4; }
</style>
<div id="tz">
<svg width="400" height="400" viewBox="-200 -200 400 400" xmlns="http://www.w3.org/2000/svg">
<defs>
<g id="line" stroke="tan" fill="lightgreen" stroke-width="4">
<line x1="-170" y1="0" x2="170" y2="0" />
<circle cx="-170" cy="0" r="20" stroke="none" />
<circle cx="170" cy="0" r="20" stroke="none" />
</g>
</defs>
</svg>
<p><textarea id="txtbox"></textarea></p>
</div>
<script>
setAttr = (el, obj_data) => {
for(var key in obj_data) {
el.setAttribute(key, obj_data[key]);
}
};
draw = (pa, el, obj_data) => {
var elm = document.createElementNS('http://www.w3.org/2000/svg', el);
setAttr(elm, obj_data);
pa.appendChild(elm);
};
mkLines = (pa, total=5) => {
Array(total).fill('').forEach((_,key) => {
let deg = 180 / total * key;
draw(pa, 'use', {href: '#line', transform: `rotate(${deg})`});
});
};
var svg = document.querySelector('svg');
mkLines(svg, 7);
txtbox.value = svg.outerHTML.replaceAll('<use', '\t<use').replaceAll('</use>', '</use>\n');
</script>
|