Mercurial > hg > digilib-old
changeset 1055:f6292c6ec440
experiments with inline svg and viewbox
| author | hertzhaft |
|---|---|
| date | Tue, 27 Mar 2012 09:32:24 +0200 |
| parents | 6488318df736 |
| children | 89c5b56933af |
| files | webapp/src/main/webapp/img/Thumbs.db webapp/src/main/webapp/jquery/jquery-test-svg.html webapp/src/main/webapp/jquery/jquery.digilib.svg.css |
| diffstat | 3 files changed, 131 insertions(+), 3 deletions(-) [+] |
line wrap: on
line diff
--- a/webapp/src/main/webapp/jquery/jquery-test-svg.html Tue Mar 27 00:01:20 2012 +0200 +++ b/webapp/src/main/webapp/jquery/jquery-test-svg.html Tue Mar 27 09:32:24 2012 +0200 @@ -1,6 +1,6 @@ <?xml version="1.0" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> -<html xmlns="http://www.w3.org/1999/xhtml"> +<html xmlns="http://www.w3.org/1999/xhtml" xmlns:xlink="http://www.w3.org/1999/xlink" > <head> <title>jquery.digilib.svg.js test</title> @@ -47,7 +47,135 @@ <a href="javascript: DIGILIB('about')">about</a> <div id="dl_svgdiv"> - <img src="test1.svg" /> + <svg version="1.0" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 1 1"> + <g style="stroke-width: 0.005; fill: none"> + <rect x="0.0" y="0.0" width="1.0" height="1.0" style="stroke: red" /> + <rect x="0.1" y="0.1" width="0.8" height="0.8" style="stroke: orange" /> + <rect x="0.2" y="0.2" width="0.6" height="0.6" style="stroke: yellow" /> + <rect x="0.3" y="0.3" width="0.4" height="0.4" style="stroke: green" /> + <rect x="0.4" y="0.4" width="0.2" height="0.2" style="stroke: cyan" /> + <g style="fill:magenta; stroke:silver; fill-opacity:0.1; stroke-opacity:0.9"> + <rect x="0.025" y="0.025" width="0.05" height="0.05"/> + <rect x="0.125" y="0.025" width="0.05" height="0.05"/> + <rect x="0.225" y="0.025" width="0.05" height="0.05"/> + <rect x="0.325" y="0.025" width="0.05" height="0.05"/> + <rect x="0.425" y="0.025" width="0.05" height="0.05"/> + <rect x="0.525" y="0.025" width="0.05" height="0.05"/> + <rect x="0.625" y="0.025" width="0.05" height="0.05"/> + <rect x="0.725" y="0.025" width="0.05" height="0.05"/> + <rect x="0.825" y="0.025" width="0.05" height="0.05"/> + <rect x="0.925" y="0.025" width="0.05" height="0.05"/> + </g> + <g style="fill:blue; stroke:silver; fill-opacity:0.1; stroke-opacity:0.9"> + <rect x="0.025" y="0.125" width="0.05" height="0.05"/> + <rect x="0.125" y="0.125" width="0.05" height="0.05"/> + <rect x="0.225" y="0.125" width="0.05" height="0.05"/> + <rect x="0.325" y="0.125" width="0.05" height="0.05"/> + <rect x="0.425" y="0.125" width="0.05" height="0.05"/> + <rect x="0.525" y="0.125" width="0.05" height="0.05"/> + <rect x="0.625" y="0.125" width="0.05" height="0.05"/> + <rect x="0.725" y="0.125" width="0.05" height="0.05"/> + <rect x="0.825" y="0.125" width="0.05" height="0.05"/> + <rect x="0.925" y="0.125" width="0.05" height="0.05"/> + </g> + <g style="fill:cyan; stroke:silver; fill-opacity:0.1; stroke-opacity:0.9"> + <rect x="0.025" y="0.225" width="0.05" height="0.05"/> + <rect x="0.125" y="0.225" width="0.05" height="0.05"/> + <rect x="0.225" y="0.225" width="0.05" height="0.05"/> + <rect x="0.325" y="0.225" width="0.05" height="0.05"/> + <rect x="0.425" y="0.225" width="0.05" height="0.05"/> + <rect x="0.525" y="0.225" width="0.05" height="0.05"/> + <rect x="0.625" y="0.225" width="0.05" height="0.05"/> + <rect x="0.725" y="0.225" width="0.05" height="0.05"/> + <rect x="0.825" y="0.225" width="0.05" height="0.05"/> + <rect x="0.925" y="0.225" width="0.05" height="0.05"/> + </g> + <g style="fill:green; stroke:silver; fill-opacity:0.1; stroke-opacity:0.9"> + <rect x="0.025" y="0.325" width="0.05" height="0.05"/> + <rect x="0.125" y="0.325" width="0.05" height="0.05"/> + <rect x="0.225" y="0.325" width="0.05" height="0.05"/> + <rect x="0.325" y="0.325" width="0.05" height="0.05"/> + <rect x="0.425" y="0.325" width="0.05" height="0.05"/> + <rect x="0.525" y="0.325" width="0.05" height="0.05"/> + <rect x="0.625" y="0.325" width="0.05" height="0.05"/> + <rect x="0.725" y="0.325" width="0.05" height="0.05"/> + <rect x="0.825" y="0.325" width="0.05" height="0.05"/> + <rect x="0.925" y="0.325" width="0.05" height="0.05"/> + </g> + <g style="fill:yellow; stroke:silver; fill-opacity:0.1; stroke-opacity:0.9"> + <rect x="0.025" y="0.425" width="0.05" height="0.05"/> + <rect x="0.125" y="0.425" width="0.05" height="0.05"/> + <rect x="0.225" y="0.425" width="0.05" height="0.05"/> + <rect x="0.325" y="0.425" width="0.05" height="0.05"/> + <rect x="0.425" y="0.425" width="0.05" height="0.05"/> + <rect x="0.525" y="0.425" width="0.05" height="0.05"/> + <rect x="0.625" y="0.425" width="0.05" height="0.05"/> + <rect x="0.725" y="0.425" width="0.05" height="0.05"/> + <rect x="0.825" y="0.425" width="0.05" height="0.05"/> + <rect x="0.925" y="0.425" width="0.05" height="0.05"/> + </g> + <g style="fill:orange; stroke:silver; fill-opacity:0.1; stroke-opacity:0.9"> + <rect x="0.025" y="0.525" width="0.05" height="0.05"/> + <rect x="0.125" y="0.525" width="0.05" height="0.05"/> + <rect x="0.225" y="0.525" width="0.05" height="0.05"/> + <rect x="0.325" y="0.525" width="0.05" height="0.05"/> + <rect x="0.425" y="0.525" width="0.05" height="0.05"/> + <rect x="0.525" y="0.525" width="0.05" height="0.05"/> + <rect x="0.625" y="0.525" width="0.05" height="0.05"/> + <rect x="0.725" y="0.525" width="0.05" height="0.05"/> + <rect x="0.825" y="0.525" width="0.05" height="0.05"/> + <rect x="0.925" y="0.525" width="0.05" height="0.05"/> + </g> + <g style="fill:red; stroke:silver; fill-opacity:0.1; stroke-opacity:0.9"> + <rect x="0.025" y="0.625" width="0.05" height="0.05"/> + <rect x="0.125" y="0.625" width="0.05" height="0.05"/> + <rect x="0.225" y="0.625" width="0.05" height="0.05"/> + <rect x="0.325" y="0.625" width="0.05" height="0.05"/> + <rect x="0.425" y="0.625" width="0.05" height="0.05"/> + <rect x="0.525" y="0.625" width="0.05" height="0.05"/> + <rect x="0.625" y="0.625" width="0.05" height="0.05"/> + <rect x="0.725" y="0.625" width="0.05" height="0.05"/> + <rect x="0.825" y="0.625" width="0.05" height="0.05"/> + <rect x="0.925" y="0.625" width="0.05" height="0.05"/> + </g> + <g style="fill:magenta; stroke:silver; fill-opacity:0.1; stroke-opacity:0.9"> + <rect x="0.025" y="0.725" width="0.05" height="0.05"/> + <rect x="0.125" y="0.725" width="0.05" height="0.05"/> + <rect x="0.225" y="0.725" width="0.05" height="0.05"/> + <rect x="0.325" y="0.725" width="0.05" height="0.05"/> + <rect x="0.425" y="0.725" width="0.05" height="0.05"/> + <rect x="0.525" y="0.725" width="0.05" height="0.05"/> + <rect x="0.625" y="0.725" width="0.05" height="0.05"/> + <rect x="0.725" y="0.725" width="0.05" height="0.05"/> + <rect x="0.825" y="0.725" width="0.05" height="0.05"/> + <rect x="0.925" y="0.725" width="0.05" height="0.05"/> + </g> + <g style="fill:blue; stroke:silver; fill-opacity:0.1; stroke-opacity:0.9"> + <rect x="0.025" y="0.825" width="0.05" height="0.05"/> + <rect x="0.125" y="0.825" width="0.05" height="0.05"/> + <rect x="0.225" y="0.825" width="0.05" height="0.05"/> + <rect x="0.325" y="0.825" width="0.05" height="0.05"/> + <rect x="0.425" y="0.825" width="0.05" height="0.05"/> + <rect x="0.525" y="0.825" width="0.05" height="0.05"/> + <rect x="0.625" y="0.825" width="0.05" height="0.05"/> + <rect x="0.725" y="0.825" width="0.05" height="0.05"/> + <rect x="0.825" y="0.825" width="0.05" height="0.05"/> + <rect x="0.925" y="0.825" width="0.05" height="0.05"/> + </g> + <g style="fill:darkgrey; stroke:silver; fill-opacity:0.1; stroke-opacity:0.9"> + <rect x="0.025" y="0.925" width="0.05" height="0.05"/> + <rect x="0.125" y="0.925" width="0.05" height="0.05"/> + <rect x="0.225" y="0.925" width="0.05" height="0.05"/> + <rect x="0.325" y="0.925" width="0.05" height="0.05"/> + <rect x="0.425" y="0.925" width="0.05" height="0.05"/> + <rect x="0.525" y="0.925" width="0.05" height="0.05"/> + <rect x="0.625" y="0.925" width="0.05" height="0.05"/> + <rect x="0.725" y="0.925" width="0.05" height="0.05"/> + <rect x="0.825" y="0.925" width="0.05" height="0.05"/> + <rect x="0.925" y="0.925" width="0.05" height="0.05"/> + </g> + </g> + </svg> </div> </body>
--- a/webapp/src/main/webapp/jquery/jquery.digilib.svg.css Tue Mar 27 00:01:20 2012 +0200 +++ b/webapp/src/main/webapp/jquery/jquery.digilib.svg.css Tue Mar 27 09:32:24 2012 +0200 @@ -4,7 +4,7 @@ * Martin Raspe, Robert Casties, 26.3.2012 */ -#dl_svgdiv img { +#dl_svgdiv { width: 700px; height: 200px; position: absolute;