88 lines
4.1 KiB
HTML
88 lines
4.1 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<title>SVG test</title>
|
|
<style>
|
|
.path {
|
|
stroke-dasharray: 1000;
|
|
stroke-dashoffset: 1000;
|
|
animation: dash 5s linear alternate infinite;
|
|
}
|
|
|
|
@keyframes dash {
|
|
from {
|
|
stroke-dashoffset: 1000;
|
|
}
|
|
to {
|
|
stroke-dashoffset: 0;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<p>Since it's not possible to test SVG functionality from a NodeJS environment, this page can be used to test it in a browser.</p>
|
|
<p>This page should contain:</p>
|
|
<ul>
|
|
<li>an HTML link labeled "HTML link"</li>
|
|
<li>an SVG link labeled "SVG link"</li>
|
|
<li>a tilted blue square</li>
|
|
<li>a cat picture from <a href="http://placekitten.com">http://placekitten.com</a></li>
|
|
<li>an animated line drawing</li>
|
|
<li>a clock with the current time</li>
|
|
</ul>
|
|
<p>The links should open in a new tab. All items should display title tooltips when hovered over.</p>
|
|
|
|
<div id="test"></div>
|
|
<script src="../mithril.js"></script>
|
|
<script>
|
|
var svg = [
|
|
m("a[href='http://google.com'][target='_blank'][title='HTML link']", "HTML link"),
|
|
m("br"),
|
|
m("svg[width=180][height=200]", [
|
|
m("rect[x=50][y=50][height=100][width=100][transform='translate(30) rotate(45 50 50)'][title='Square']", {style: {stroke: "#000", fill: "#0086b2"}}),
|
|
m("a[href='http://google.com'][title='SVG link'][target=_new]", {style: {textDecoration: "underline"}}, [
|
|
m("text[x=0][y=20]", "SVG Link")
|
|
])
|
|
]),
|
|
m("svg[height='200px'][width='200px']", [
|
|
m("image[href='http://placekitten.com/200/200'][height='200px'][width='200px'][title='Cat picture']")
|
|
]),
|
|
m("svg[enable-background='new 0 0 340 333'][height='333px'][viewBox='0 0 340 333'][width='340px'][x='0px'][y='0px'][title='Line drawings']", [
|
|
m("path.path[d='M66.039,133.545c0,0-21-57,18-67s49-4,65,8s30,41,53,27s66,4,58,32s-5,44,18,57s22,46,0,45s-54-40-68-16s-40,88-83,48s11-61-11-80s-79-7-70-41C46.039,146.545,53.039,128.545,66.039,133.545z'][fill='#FFFFFF'][stroke='#000000'][stroke-miterlimit='10'][stroke-width='4']")
|
|
]),
|
|
m("svg[height='270px'][width='270px'][viewBox='0 0 270 270']", [
|
|
m("g[transform='translate(150,150)'][title='Clock']", [
|
|
m("g", [
|
|
m("circle[r='108'][fill='none'][stroke-width='4'][stroke='gray']"),
|
|
m("circle[r='97'][fill='none'][stroke-width='11'][stroke='black'][stroke-dasharray='4,46.789082'][transform='rotate(-1.5)']"),
|
|
m("circle[r='100'][fill='none'][stroke-width='5'][stroke='black'][stroke-dasharray='2,8.471976'][transform='rotate(-.873)']"),
|
|
]),
|
|
m("g[transform='rotate(180)']", [
|
|
m("g[id='hour']", [
|
|
m("line[stroke-width='5'][y2='75'][stroke-linecap='round'][stroke='blue'][opacity='.5']"),
|
|
m("animateTransform[attributeName='transform'][type='rotate'][repeatCount='indefinite'][dur='12h'][by='360']"),
|
|
m("circle[r='7']")
|
|
]),
|
|
m("g[id='minute']", [
|
|
m("line[stroke-width='4'][y2='93'][stroke-linecap='round'][stroke='green'][opacity='.9']"),
|
|
m("animateTransform[attributeName='transform'][type='rotate'][repeatCount='indefinite'][dur='60min'][by='360']"),
|
|
m("circle[r='6'][fill='red']")
|
|
]),
|
|
m("g[id='second']", [
|
|
m("line[stroke-width='2'][y1='-20'][y2=102][stroke-linecap='round'][stroke='red']"),
|
|
m("animateTransform[attributeName='transform'][type='rotate'][repeatCount='indefinite'][dur='60s'][by='360']"),
|
|
m("circle[r='4'][fill='blue']")
|
|
])
|
|
])
|
|
]),
|
|
m("script", 'var a=new Date,b=parseInt(a.getHours());b=b>12?b-12:b;var c=parseInt(a.getMinutes()),d=parseInt(a.getSeconds()),e=6*d,f=6*(c+d/60),g=30*(b+c/60+d/3600),h=document.getElementById("hour"),i=document.getElementById("minute"),j=document.getElementById("second");h.setAttribute("transform","rotate("+g.toString()+")"),i.setAttribute("transform","rotate("+f.toString()+")"),j.setAttribute("transform","rotate("+e.toString()+")")'),
|
|
]),
|
|
m("svg[height='200px'][width='200px']", [
|
|
m("foreignObject[x=0][y=0][width='100px'][height='100px'][transform='translate(0,0)'']", m('div', {xmlns: "http://www.w3.org/1999/xhtml"}, m.trust('this is a piece of html rendered as <a href="http://www.w3.org/TR/SVG11/extend.html">SVG foreignObject</strong>')))
|
|
])
|
|
]
|
|
|
|
m.render(document.getElementById("test"), svg)
|
|
</script>
|
|
</body>
|
|
</html>
|