demo/layers.html
<!DOCTYPE html>
<html>
<head>
<title>Layers</title>
<script src="../dist/svg-pan-zoom.js"></script>
</head>
<body>
<h1>Demo for svg-pan-zoom: SVG with Layers</h1>
<div id="layers-container" style="width: 500px; height: 500px; border:1px solid black; ">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:ev="http://www.w3.org/2001/xml-events" id="layers" version="1.1" baseProfile="full"
preserveAspectRatio="xMidYMid" width="100%" height="100%" style="overflow: hidden; background-color:white; ">
<g id="viewport-20140818215835919" class="viewport">
<defs>
<style type="text/css">
svg {
color-interpolation: auto;
image-rendering: auto;
shape-rendering: auto;
vector-effect: non-scaling-stroke;
background: white;
/* removed fill and stroke since they override marker specs */
/* fill: white;
stroke: black; */
}
/* default color for pathway elements */
.default-fill-color {
fill: black;
}
.default-stroke-color {
stroke: black;
}
/* default color of the background drawing board */
.board-fill-color {
fill: white;
}
.board-stroke-color {
stroke: white;
}
.text-area {
font-family: Sans-Serif, Helvetica, Arial;
text-align: center;
vertical-align: middle;
font-size: 10px;
fill: black;
fill-opacity: 1;
stroke: none;
}
.citation {
font-family: Sans-Serif, Helvetica, Arial;
text-align: center;
vertical-align: top;
font-size: 7px;
fill: #999999;
fill-opacity: 1;
stroke: none;
}
.info-box {
font-family: Sans-Serif;
font-size: 10px;
fill: black;
stroke: none;
text-align: left;
vertical-align: top;
}
.info-box-item-property-name {
font-weight: bold;
}
.info-box-item-property-value {
}
.data-node {
text-align: right;
fill-opacity: 1;
fill: white;
stroke: black;
stroke-width: 1;
stroke-dasharray: 0;
stroke-miterlimit: 1;
pointer-events: auto;
}
.data-node: hover {
cursor: pointer;
}
.has-xref: hover {
cursor: pointer;
}
.data-node.gene-product {
}
.metabolite {
stroke: blue;
}
.data-node.metabolite
&
gt
;
.text-area {
fill: blue;
fill-opacity: 1;
stroke: none;
}
.data-node.pathway {
stroke: none;
fill-opacity: 0;
}
.data-node.pathway
&
gt
;
.text-area {
fill: rgb(20, 150, 30);
fill-opacity: 1;
font-size: 12px;
font-weight: bold;
}
.data-node.protein {
}
.data-node.rna {
}
.data-node.unknown {
}
.label {
stroke: null;
stroke-width: 0;
fill-opacity: 0;
stroke-dasharray: 0;
stroke-miterlimit: 1;
}
.shape {
fill-opacity: 0;
stroke: black;
stroke-dasharray: 0;
stroke-miterlimit: 1;
}
.shape.none {
fill: none;
fill-opacity: 0;
stroke: none;
}
g.group-node
&
gt
;
.shape {
fill-opacity: 0.098;
stroke: gray;
stroke-miterlimit: 1;
stroke-width: 1px;
pointer-events: none;
}
.group-node {
fill-opacity: 0.098;
stroke: gray;
stroke-miterlimit: 1;
stroke-width: 1px;
pointer-events: none;
}
.group-node
&
gt
;
.text-area {
fill-opacity: 0.4;
font-family: Serif, Times;
font-size: 32px;
fill: black;
stroke-width: 0;
font-weight: bold;
}
.group-node.none {
fill: rgb(180, 180, 100);
stroke-dasharray: 5, 3;
}
.group-node.none
&
gt
;
.text-area {
display: none;
}
/*.group-node.none:hover {
fill: rgb(255,180,100);
fill-opacity: 0.05;
}*/
.group-node.group {
fill-opacity: 0;
stroke: none;
}
.group-node.group
&
gt
;
.text-area {
display: none;
}
/*.group-node.group:hover {
fill: rgb(0,0,255);
stroke-width: 1px;
stroke-dasharray: 5,3;
stroke: gray;
fill-opacity: 0.1;
}*/
.group-node.complex {
fill: rgb(180, 180, 100);
}
.group-node.complex
&
gt
;
.text-area {
display: none;
}
/*.group-node.complex:hover {
fill: rgb(255,0,0);
fill-opacity: 0.05;
}*/
.group-node.pathway {
fill: rgb(0, 255, 0);
stroke-dasharray: 5, 3;
}
/*.group-node.pathway:hover {
fill: rgb(0,255,0);
fill-opacity: 0.2;
}*/
.group-node.pathway
&
gt
;
.text-area {
fill: rgb(20, 150, 30);
stroke: rgb(20, 150, 30);
}
.cellular-component {
fill-opacity: 0;
stroke: silver;
}
.graphical-line {
fill: none;
stroke: black;
stroke-width: 1px;
}
.interaction {
fill: none;
stroke: black;
stroke-width: 1px;
}
marker {
/* this is what should work per the spec
stroke-dasharray: none; */
/* but I need to add this to make it work in Safari */
stroke-dasharray: 9999999999999999999999999;
}
.marker-end {
-webkit-transform: rotate(180deg);
-webkit-transform-origin: 50% 50%;
-o-transform: rotate(180deg);
-o-transform-origin: 50% 50%;
transform: rotate(180deg);
transform-origin: 50% 50%;
}
.solid-stroke {
/* this is what should work per the spec
stroke-dasharray: none; */
/* but I need to add this to make it work in Safari */
stroke-dasharray: 9999999999999999999999999;
}
.dashed-stroke {
stroke-dasharray: 5, 3;
}
</style>
<marker id="id-mimcatalysis-start-000000" orient="auto" markerUnits="strokeWidth"
preserveAspectRatio="none" refY="6" viewBox="0 0 12 12" markerWidth="12" markerHeight="12"
refX="0">
<g id="g-id-mimcatalysis-start-000000">
<circle cx="6" cy="6" r="5.3px" stroke="#000000" stroke-width="1" fill="white"></circle>
</g>
</marker>
<marker id="id-mimcatalysis-end-000000" orient="auto" markerUnits="strokeWidth"
preserveAspectRatio="none" refY="6" viewBox="0 0 12 12" markerWidth="12" markerHeight="12"
refX="12">
<g id="g-id-mimcatalysis-end-000000" transform="rotate(180, 6, 6)">
<circle cx="6" cy="6" r="5.3px" stroke="#000000" stroke-width="1" fill="white"></circle>
</g>
</marker>
</defs>
<path d="M26.134222919937145,52.5L118.18602825745671,52.5L118.18602825745671,88.5L26.134222919937145,88.5Z"
fill="#ff0000" id="a050d" stroke-width="1" stroke="#000000"></path>
<path d="M42.64785933368455,70.85006615121671L104.13212719650267,69.37077621038827" fill="transparent"
stroke-dasharray="5,3" id="bd5b2" stroke-width="1" stroke="#000000"
marker-start="url(#id-mimcatalysis-start-000000)"
marker-end="url(#id-mimcatalysis-end-000000)"></path>
<g id="info-box-0" class="text-area info-box">
<text id="info-box-text0" class="item" x="0" y="14">
<tspan class="info-box-item-property-name">Title:</tspan>
<tspan class="info-box-item-property-value">Test Protocol - Interactions</tspan>
</text>
<text id="info-box-text1" class="item" x="0" y="28">
<tspan class="info-box-item-property-name">Organism:</tspan>
<tspan class="info-box-item-property-value">Anopheles gambiae</tspan>
</text>
</g>
</g>
<g id="svg-pan-zoom-controls" transform="translate(2053 641) scale(0.75)" class="svg-pan-zoom-control">
<g id="svg-pan-zoom-zoom-in" transform="translate(30.5 5) scale(0.015)" class="svg-pan-zoom-control">
<rect x="0" y="0" width="1500" height="1400" class="svg-pan-zoom-control-background"></rect>
<path d="M1280 576v128q0 26 -19 45t-45 19h-320v320q0 26 -19 45t-45 19h-128q-26 0 -45 -19t-19 -45v-320h-320q-26 0 -45 -19t-19 -45v-128q0 -26 19 -45t45 -19h320v-320q0 -26 19 -45t45 -19h128q26 0 45 19t19 45v320h320q26 0 45 19t19 45zM1536 1120v-960 q0 -119 -84.5 -203.5t-203.5 -84.5h-960q-119 0 -203.5 84.5t-84.5 203.5v960q0 119 84.5 203.5t203.5 84.5h960q119 0 203.5 -84.5t84.5 -203.5z"
class="svg-pan-zoom-control-element"></path>
</g>
<g id="svg-pan-zoom-reset-pan-zoom" transform="translate(5 35) scale(0.4)" class="svg-pan-zoom-control">
<rect x="2" y="2" width="182" height="58" class="svg-pan-zoom-control-background"></rect>
<path d="M33.051,20.632c-0.742-0.406-1.854-0.609-3.338-0.609h-7.969v9.281h7.769c1.543,0,2.701-0.188,3.473-0.562c1.365-0.656,2.048-1.953,2.048-3.891C35.032,22.757,34.372,21.351,33.051,20.632z"
class="svg-pan-zoom-control-element"></path>
<path d="M170.231,0.5H15.847C7.102,0.5,0.5,5.708,0.5,11.84v38.861C0.5,56.833,7.102,61.5,15.847,61.5h154.384c8.745,0,15.269-4.667,15.269-10.798V11.84C185.5,5.708,178.976,0.5,170.231,0.5z M42.837,48.569h-7.969c-0.219-0.766-0.375-1.383-0.469-1.852c-0.188-0.969-0.289-1.961-0.305-2.977l-0.047-3.211c-0.03-2.203-0.41-3.672-1.142-4.406c-0.732-0.734-2.103-1.102-4.113-1.102h-7.05v13.547h-7.055V14.022h16.524c2.361,0.047,4.178,0.344,5.45,0.891c1.272,0.547,2.351,1.352,3.234,2.414c0.731,0.875,1.31,1.844,1.737,2.906s0.64,2.273,0.64,3.633c0,1.641-0.414,3.254-1.242,4.84s-2.195,2.707-4.102,3.363c1.594,0.641,2.723,1.551,3.387,2.73s0.996,2.98,0.996,5.402v2.32c0,1.578,0.063,2.648,0.19,3.211c0.19,0.891,0.635,1.547,1.333,1.969V48.569z M75.579,48.569h-26.18V14.022h25.336v6.117H56.454v7.336h16.781v6H56.454v8.883h19.125V48.569z M104.497,46.331c-2.44,2.086-5.887,3.129-10.34,3.129c-4.548,0-8.125-1.027-10.731-3.082s-3.909-4.879-3.909-8.473h6.891c0.224,1.578,0.662,2.758,1.316,3.539c1.196,1.422,3.246,2.133,6.15,2.133c1.739,0,3.151-0.188,4.236-0.562c2.058-0.719,3.087-2.055,3.087-4.008c0-1.141-0.504-2.023-1.512-2.648c-1.008-0.609-2.607-1.148-4.796-1.617l-3.74-0.82c-3.676-0.812-6.201-1.695-7.576-2.648c-2.328-1.594-3.492-4.086-3.492-7.477c0-3.094,1.139-5.664,3.417-7.711s5.623-3.07,10.036-3.07c3.685,0,6.829,0.965,9.431,2.895c2.602,1.93,3.966,4.73,4.093,8.402h-6.938c-0.128-2.078-1.057-3.555-2.787-4.43c-1.154-0.578-2.587-0.867-4.301-0.867c-1.907,0-3.428,0.375-4.565,1.125c-1.138,0.75-1.706,1.797-1.706,3.141c0,1.234,0.561,2.156,1.682,2.766c0.721,0.406,2.25,0.883,4.589,1.43l6.063,1.43c2.657,0.625,4.648,1.461,5.975,2.508c2.059,1.625,3.089,3.977,3.089,7.055C108.157,41.624,106.937,44.245,104.497,46.331z M139.61,48.569h-26.18V14.022h25.336v6.117h-18.281v7.336h16.781v6h-16.781v8.883h19.125V48.569z M170.337,20.14h-10.336v28.43h-7.266V20.14h-10.383v-6.117h27.984V20.14z"
class="svg-pan-zoom-control-element"></path>
</g>
<g id="svg-pan-zoom-zoom-out" transform="translate(30.5 70) scale(0.015)" class="svg-pan-zoom-control">
<rect x="0" y="0" width="1500" height="1400" class="svg-pan-zoom-control-background"></rect>
<path d="M1280 576v128q0 26 -19 45t-45 19h-896q-26 0 -45 -19t-19 -45v-128q0 -26 19 -45t45 -19h896q26 0 45 19t19 45zM1536 1120v-960q0 -119 -84.5 -203.5t-203.5 -84.5h-960q-119 0 -203.5 84.5t-84.5 203.5v960q0 119 84.5 203.5t203.5 84.5h960q119 0 203.5 -84.5 t84.5 -203.5z"
class="svg-pan-zoom-control-element"></path>
</g>
</g>
</svg>
<script>
// Don't use window.onLoad like this in production, because it can only listen to one function.
window.onload = function () {
// Expose variable for testing purposes
window.panZoomPenguin = svgPanZoom('#layers', {
zoomEnabled: true,
controlIconsEnabled: true,
fit: true,
center: true
});
};
</script>
</body>
</html>