ShadowEditor/ShadowEditor.SVG/test2/11 SvgPathTest.html
2018-11-07 12:24:38 +08:00

64 lines
1.6 KiB
HTML

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>11 SvgPathTest</title>
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
</head>
<body>
<script src="../dist/ShadowEditor.SVG.js"></script>
<script>
var dom = UI.create({
xtype: 'svgdom',
id: 'dom1',
parent: document.body,
attr: {
width: 800,
height: 600,
},
children: [{
xtype: 'svgdefs',
children: [{
xtype: 'svgpath',
attr: {
id: 'path1',
d: 'M75,20 a1,1 0 0,0 100,0',
fill: 'none'
}
}]
}, {
xtype: 'svguse',
attr: {
'xlink:href': '#path1',
stroke: '#f00'
}
}, {
xtype: 'svgtext',
attr: {
x: 10,
y: 100,
fill: '#f00'
},
children: [{
xtype: 'svgtextpath',
html: 'I Love SVG. I Love SVG.',
attr: {
'xlink:href': '#path1'
}
}],
listeners: {
click: () => {
alert('You clicked!');
}
}
}]
});
dom.render();
</script>
</body>
</html>