Drawing some stuff with svg
This commit is contained in:
parent
97d13f5e41
commit
024f38644f
@ -112,24 +112,24 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="600">
|
||||
<defs>
|
||||
<linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||
<stop offset="0%" stop-color="#ffffff"/>
|
||||
<stop offset="100%" stop-color="#000000"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<svg id="svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="600">
|
||||
<!-- <defs> -->
|
||||
<!-- <linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%"> -->
|
||||
<!-- <stop offset="0%" stop-color="#ffffff"/> -->
|
||||
<!-- <stop offset="100%" stop-color="#000000"/> -->
|
||||
<!-- </linearGradient> -->
|
||||
<!-- </defs> -->
|
||||
|
||||
<symbol id="graph">
|
||||
<rect x="5" y="0" height="490" width="90" style="stroke: #d3d7cf; fill: #eeeeec"/>
|
||||
<rect x="5" y="0" height="245" width="90" style="fill: #cc0000"/>
|
||||
<rect x="90" y="0" height="490" width="10" style="stroke: #d3d7cf; fill: url(#gradient)"/>
|
||||
<rect x="0" y="490" height="20" width="100" style="fill: #d3d7cf;"/>
|
||||
<line x1="0" y1="245" x2="5" y2="245" style="stroke: #888a85;"/>
|
||||
<text x="55" y="500" dominant-baseline="middle" text-anchor="middle">label</text>
|
||||
</symbol>
|
||||
<!-- <symbol id="graph"> -->
|
||||
<!-- <rect x="5" y="0" height="490" width="90" style="stroke: #d3d7cf; fill: #eeeeec"/> -->
|
||||
<!-- <rect x="5" y="0" height="245" width="90" style="fill: #cc0000"/> -->
|
||||
<!-- <rect x="90" y="0" height="490" width="10" style="stroke: #d3d7cf; fill: url(#gradient)"/> -->
|
||||
<!-- <rect x="0" y="490" height="20" width="100" style="fill: #d3d7cf;"/> -->
|
||||
<!-- <line x1="0" y1="245" x2="5" y2="245" style="stroke: #888a85;"/> -->
|
||||
<!-- <text x="55" y="500" dominant-baseline="middle" text-anchor="middle">label</text> -->
|
||||
<!-- </symbol> -->
|
||||
|
||||
<use xlink:href="#graph" x="0" y="0"/>
|
||||
<!-- <use xlink:href="#graph" x="0" y="0"/> -->
|
||||
</svg>
|
||||
|
||||
<!-- query output -->
|
||||
|
@ -71,7 +71,7 @@
|
||||
ctx.maxResults = query.maxResults;
|
||||
|
||||
ctx.grapher = new grapher.Grapher({
|
||||
canvas: null,
|
||||
canvas: Snap('#svg'),
|
||||
columnRange: ctx.searchRange,
|
||||
columnWidth: 150,
|
||||
useLocalScale: true,
|
||||
|
@ -111,7 +111,12 @@
|
||||
|
||||
function Column(params) {
|
||||
this.updateShapes = function() {
|
||||
|
||||
var bigCircle = this.canvas.circle(150, 150, 100);
|
||||
bigCircle.attr({
|
||||
fill: "#bada55",
|
||||
stroke: "#000",
|
||||
strokeWidth: 5
|
||||
});
|
||||
};
|
||||
|
||||
this.decimateHints = function(hints, steps, scale) {
|
||||
|
Loading…
Reference in New Issue
Block a user