Fetching contributors…
Cannot retrieve contributors at this time
68 lines (58 sloc) 2.2 KB
<!DOCTYPE html>
<link rel="stylesheet" href="svg-example1.css">
<script id="index" type="text/tpl">
@view main body
svg[viewBox="0 0 200 100"][preserveAspectRatio="xMidYMin meet"]
text[x=10][y=17][font-family=Verdana][font-size=5] Full SVG single-page application example
a.Menu-item &xlink: "#home"
text[x=10][y=40][font-family=Verdana][font-size=5] Home
a.Menu-item &xlink: "#settings"
text[x=10][y=50][font-family=Verdana][font-size=5] Settings
// Use svg nesting for relative position
svg[x=60][y=30][width=135][height=65][viewBox="0 0 135 65"]
@view home main
text[x=5][y=15][font-family=Verdana][font-size=10] Main page
@view settings main
text[x=5][y=15][font-family=Verdana][font-size=10] Settings page
text[x=5][y=25][font-family=Verdana][font-size=5] Subheader
<script src="../load.js"></script>
<script src="../dist/litejs.js"></script>
// Add `#body` view, it is a starting point for us.
// It could be any element on page but we want to start from `BODY`.
View("body", document.body)
// Populate cache with svg namespace nodes
// In html-svg mixed page you should prefix svg elements,
// e.g. El.cache["svg-" + name] = document.createElementNS(ns, name)
var ns = ""
, xlinkNs = ""
, noSvg = !document.createElementNS || !document.createElementNS(ns, "svg").createSVGRect
function c(name) {
El.cache[name] = document.createElementNS(ns, name)
if (noSvg) {
alert("SVG not supported")
El.bindings.xlink = function(href) {
this.setAttributeNS(xlinkNs, "xlink:href", href)
El.bindings.xlink.once = 1
"svg a circle clipPath defs g path rect text stop use linearGradient".replace(/\w+/g, c)
// Read in templates from element with id=index
// You must define at least one language
"en":"In English"
// Start a router to showing views
<noscript><h1>Error</h1>This application requires JavaScript</noscript>