init
This commit is contained in:
djerom
commit
b0cb3e60d6
14
file.js
Normal file
14
file.js
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
export default {
|
||||||
|
download(filename, text) {
|
||||||
|
var element = document.createElement("a");
|
||||||
|
element.setAttribute("href", "data:text/plain;charset=utf-8," + encodeURIComponent(text));
|
||||||
|
element.setAttribute("download", filename);
|
||||||
|
|
||||||
|
element.style.display = "none";
|
||||||
|
document.body.appendChild(element);
|
||||||
|
|
||||||
|
element.click();
|
||||||
|
|
||||||
|
document.body.removeChild(element);
|
||||||
|
},
|
||||||
|
};
|
||||||
503
index.html
Normal file
503
index.html
Normal file
@ -0,0 +1,503 @@
|
|||||||
|
<script src="https://unpkg.com/axios@0.2.1/dist/axios.min.js"></script>
|
||||||
|
<!-- <script src="index.js" type="module"></script> -->
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.panel div {
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div class="panel">
|
||||||
|
<div>
|
||||||
|
<button onclick="save()">Download</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style="width: 100px;"> </div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<button onclick="build_map_wopt()">WOPT map</button>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<button onclick="build_map_wwpt()">WWPT map</button>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<button onclick="build_map_wgpt()">WGPT map</button>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<button onclick="build_map_wwit()">WWIT map</button>
|
||||||
|
</div>
|
||||||
|
<div style="width: 100px;"> </div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<button onclick="build_map_wopt()">WOPR map</button>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<button onclick="build_map_wwpt()">WWPR map</button>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<button onclick="build_map_wgpr()">WGPR map</button>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<button onclick="build_map_wwit()">WWIR map</button>
|
||||||
|
</div>
|
||||||
|
<div style="width: 100px;"> </div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<button onclick="scale()">Scale</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div id="map" style="border: 1px #000 solid;"></div>
|
||||||
|
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<div>menu</div>
|
||||||
|
<div>map</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<script>
|
||||||
|
function download(filename, text) {
|
||||||
|
var element = document.createElement('a');
|
||||||
|
element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
|
||||||
|
element.setAttribute('download', filename);
|
||||||
|
element.setAttribute('target', '_blank');
|
||||||
|
|
||||||
|
element.style.display = 'none';
|
||||||
|
document.body.appendChild(element);
|
||||||
|
|
||||||
|
element.click();
|
||||||
|
|
||||||
|
document.body.removeChild(element);
|
||||||
|
}
|
||||||
|
|
||||||
|
let wells = [
|
||||||
|
{ id: 1, name: 'well1', whx: 100, why: 100 },
|
||||||
|
{ id: 2, name: 'well2', whx: 200, why: 300 },
|
||||||
|
{ id: 3, name: 'well3', whx: 300, why: 500 },
|
||||||
|
{ id: 4, name: 'well4', whx: 100, why: 500 }
|
||||||
|
]
|
||||||
|
|
||||||
|
let map = {
|
||||||
|
layers: [
|
||||||
|
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
||||||
|
function render_map(map) {
|
||||||
|
// let header = `<svg viewBox="-200 -200 2000 2000" version="1.1" xmlns="http://www.w3.org/2000/svg">`
|
||||||
|
let header = `<svg viewBox="-200 -200 2000 2000" version="1.1" xmlns="http://www.w3.org/2000/svg" id="svg">`
|
||||||
|
// let header = `<svg viewBox="-200 -200 2000 2000" version="1.1" xmlns="http://www.w3.org/2000/svg" id="svg" preserveAspectRatio="xMinYMax meet">`
|
||||||
|
let footer = `</svg>`
|
||||||
|
let body = map.layers.join('')
|
||||||
|
|
||||||
|
return header + body + footer
|
||||||
|
}
|
||||||
|
// let layer = '<g>' + wells.map(x => `<circle cx="${x.whx}" cy="${x.whx}" r="50" />`).join('') + '</g>'
|
||||||
|
|
||||||
|
class SvgNode {
|
||||||
|
constructor(tag, attrs) {
|
||||||
|
this.tag = tag
|
||||||
|
this.attrs = attrs || {}
|
||||||
|
}
|
||||||
|
|
||||||
|
set_attr(attr, value) {
|
||||||
|
if (typeof attr === 'string')
|
||||||
|
this.attrs[attr] = value
|
||||||
|
else
|
||||||
|
this.attrs = { ...this.attrs, ...attr }
|
||||||
|
return this
|
||||||
|
}
|
||||||
|
|
||||||
|
set_style(style) {
|
||||||
|
this.style = { ...this.style || {}, ...style }
|
||||||
|
return this
|
||||||
|
}
|
||||||
|
|
||||||
|
clear_style(style) {
|
||||||
|
this.style = null
|
||||||
|
return this
|
||||||
|
}
|
||||||
|
|
||||||
|
move(x, y) {
|
||||||
|
this.transform = { x, y }
|
||||||
|
return this
|
||||||
|
}
|
||||||
|
|
||||||
|
get(attr) {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
_render_node(node) {
|
||||||
|
// console.log(typeof node)
|
||||||
|
// if (typeof node == 'undefined') return ''
|
||||||
|
if (typeof node == 'string') return node
|
||||||
|
else if (typeof node == 'SvgNode') return node.render()
|
||||||
|
else return ''
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
let attrs = Object.keys(this.attrs).map(x => `${x}="${this.attrs[x]}"`).join(' ')
|
||||||
|
// console.log(this.style ? Object.keys(this.style).map(x => `${x}:${this.style[x]}`) : '')
|
||||||
|
let style = this.style ? 'style="' + Object.keys(this.style).map(x => `${x}:${this.style[x]}`).join('; ') + '"' : ''
|
||||||
|
let transfrom = this.transform ? `transform="translate(${this.transform.x},${this.transform.y})"` : ''
|
||||||
|
let children = this.items ? this.items.map(x => this._render_node(x)).join('') : ''
|
||||||
|
return `<${this.tag} ${attrs} ${style} ${transfrom}>${children}</${this.tag}>`
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
svg_node = {}
|
||||||
|
|
||||||
|
|
||||||
|
svg_path = {
|
||||||
|
move(x, y) {
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
line(x, y) {
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
arc(x, y, r, a) {
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
attrs: {
|
||||||
|
'stroke-width': 3
|
||||||
|
},
|
||||||
|
|
||||||
|
layers: [],
|
||||||
|
|
||||||
|
render() {
|
||||||
|
return `<path d="M0 0 L${c0} ${s0} A ${r} ${r} 0 ${aa} 0 ${c1} ${s1} z" stroke-width="3" stroke="#f00" fill="#0f0"/>`
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function arc(r, ang) {
|
||||||
|
var sa = -Math.sin(ang * Math.PI / 180) * r;
|
||||||
|
var ca = Math.cos(ang * Math.PI / 180) * r;
|
||||||
|
var aa = (ang > 180) ? 1 : 0;
|
||||||
|
// var p = new TimalSvg.Data.SvgPath(string.Format("M0 0 L{0} 0 A {0} {0} 0 {3} 0 {1} {2} z", FN(r), ca, sa, aa));
|
||||||
|
// p.Transform = string.Format("rotate({0})", FN(ang / 2));
|
||||||
|
|
||||||
|
return `<path d="M${r} 0 A ${r} ${r} 0 ${aa} 0 ${ca} ${sa}" stroke-width="30" stroke="#f00" fill="none"/>`
|
||||||
|
}
|
||||||
|
|
||||||
|
function sector(r, a0, a1) {
|
||||||
|
const k = Math.PI / 180
|
||||||
|
let s0 = -Math.sin(a0 * k) * r;
|
||||||
|
let c0 = Math.cos(a0 * k) * r;
|
||||||
|
let s1 = -Math.sin(a1 * k) * r;
|
||||||
|
let c1 = Math.cos(a1 * k) * r;
|
||||||
|
|
||||||
|
var aa = (a1 - a0 > 180) ? 1 : 0
|
||||||
|
// var p = new TimalSvg.Data.SvgPath(string.Format("M0 0 L{0} 0 A {0} {0} 0 {3} 0 {1} {2} z", FN(r), ca, sa, aa));
|
||||||
|
// p.Transform = string.Format("rotate({0})", FN(ang / 2));
|
||||||
|
|
||||||
|
return `<path d="M0 0 L${c0} ${s0} A ${r} ${r} 0 ${aa} 0 ${c1} ${s1} z" stroke-width="3" stroke="#f00" fill="#0f0"/>`
|
||||||
|
}
|
||||||
|
|
||||||
|
function svg_sector(r, a0, a1) {
|
||||||
|
const k = Math.PI / 180
|
||||||
|
let s0 = -Math.sin(a0 * k) * r;
|
||||||
|
let c0 = Math.cos(a0 * k) * r;
|
||||||
|
let s1 = -Math.sin(a1 * k) * r;
|
||||||
|
let c1 = Math.cos(a1 * k) * r;
|
||||||
|
|
||||||
|
var aa = (a1 - a0 > 180) ? 1 : 0
|
||||||
|
// var p = new TimalSvg.Data.SvgPath(string.Format("M0 0 L{0} 0 A {0} {0} 0 {3} 0 {1} {2} z", FN(r), ca, sa, aa));
|
||||||
|
// p.Transform = string.Format("rotate({0})", FN(ang / 2));
|
||||||
|
|
||||||
|
return new SvgNode('path', { d: `M0 0 L${c0} ${s0} A ${r} ${r} 0 ${aa} 0 ${c1} ${s1} z` })
|
||||||
|
}
|
||||||
|
|
||||||
|
let style = {
|
||||||
|
'stroke-width': 3,
|
||||||
|
'stroke': '#f00',
|
||||||
|
'fill': '#0f0'
|
||||||
|
}
|
||||||
|
|
||||||
|
function circle(r) {
|
||||||
|
return new SvgNode('circle').set_attr('r', r)
|
||||||
|
}
|
||||||
|
|
||||||
|
function svg_ring_sector(r0, r1, a0, a1) {
|
||||||
|
const k = Math.PI / 180
|
||||||
|
let s0 = -Math.sin(a0 * k);
|
||||||
|
let c0 = Math.cos(a0 * k);
|
||||||
|
let s1 = -Math.sin(a1 * k);
|
||||||
|
let c1 = Math.cos(a1 * k);
|
||||||
|
|
||||||
|
var aa = (a1 - a0 > 180) ? 1 : 0
|
||||||
|
|
||||||
|
return new SvgNode('path', {
|
||||||
|
'd': `M${c0 * r0} ${s0 * r0}
|
||||||
|
A ${r0} ${r0} 0 ${aa} 0 ${c1 * r0} ${s1 * r0}
|
||||||
|
L${c1 * r1} ${s1 * r1}
|
||||||
|
A ${r1} ${r1} 0 ${aa} 1 ${c0 * r1} ${s0 * r1} z`
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
let style2 = {
|
||||||
|
'stroke-width': 3,
|
||||||
|
'stroke': '#00f',
|
||||||
|
'fill': '#0ff'
|
||||||
|
}
|
||||||
|
|
||||||
|
let style3 = {
|
||||||
|
'stroke-width': 1,
|
||||||
|
'stroke': '#000',
|
||||||
|
'fill': '#fff'
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
let style_fault = {
|
||||||
|
'stroke-width': 3,
|
||||||
|
'stroke-dasharray': "10 10",
|
||||||
|
'stroke': '#000',
|
||||||
|
'fill': 'none'
|
||||||
|
}
|
||||||
|
|
||||||
|
let style_vnk = {
|
||||||
|
'stroke-width': 2,
|
||||||
|
'stroke-dasharray': "2 2",
|
||||||
|
'stroke': '#00f',
|
||||||
|
'fill': 'none'
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
let style_wellhead = {
|
||||||
|
'stroke-width': 2,
|
||||||
|
'stroke': '#f00',
|
||||||
|
'fill': '#eee',
|
||||||
|
'font-family': 'Courier new',
|
||||||
|
'font-weight': 'bold',
|
||||||
|
'font-size': '26px'
|
||||||
|
}
|
||||||
|
|
||||||
|
let style_wellhead_text = {
|
||||||
|
'stroke-width': 1,
|
||||||
|
'stroke': '#fff',
|
||||||
|
'fill': '#000',
|
||||||
|
'font-family': 'Courier new',
|
||||||
|
'font-weight': 'bold',
|
||||||
|
'font-size': '26px'
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
let style_wir = {
|
||||||
|
'stroke-width': 3,
|
||||||
|
'stroke': '#00f',
|
||||||
|
'fill': '#0af'
|
||||||
|
}
|
||||||
|
|
||||||
|
let style_opr = {
|
||||||
|
'stroke-width': 1,
|
||||||
|
'stroke': '#00f',
|
||||||
|
'fill': '#293324'
|
||||||
|
}
|
||||||
|
|
||||||
|
let style_gpr = {
|
||||||
|
'stroke-width': 1,
|
||||||
|
'stroke': '#00f',
|
||||||
|
'fill': '#ff0'
|
||||||
|
}
|
||||||
|
|
||||||
|
let fault = {
|
||||||
|
name: 'Fault 1', lines: [
|
||||||
|
[
|
||||||
|
{ x: 10, y: 20 },
|
||||||
|
{ x: 300, y: 50 },
|
||||||
|
{ x: 170, y: 10 },
|
||||||
|
{ x: 120, y: -150 }
|
||||||
|
]
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
||||||
|
function render_fault(fault) {
|
||||||
|
let path0 = fault.lines[0]
|
||||||
|
path0 = path0.slice(0, 1).map(x => `M${x.x} ${x.y}`).join(' ') + ' ' + path0.slice(1).map(x => `L${x.x} ${x.y}`).join(' ')
|
||||||
|
|
||||||
|
return new SvgNode('path').set_attr('d', path0)
|
||||||
|
}
|
||||||
|
|
||||||
|
let vnk1 = [
|
||||||
|
{ x: -10, y: -20 },
|
||||||
|
{ x: 300, y: 0 },
|
||||||
|
{ x: 470, y: 300 },
|
||||||
|
{ x: -120, y: 290 }
|
||||||
|
]
|
||||||
|
|
||||||
|
function render_contour(curve) {
|
||||||
|
let path0 = curve.slice(0, 1).map(x => `M${x.x} ${x.y}`).join(' ') + ' ' + curve.slice(1).map(x => `L${x.x} ${x.y}`).join(' ') + ' z'
|
||||||
|
|
||||||
|
return new SvgNode('path').set_attr('d', path0)
|
||||||
|
}
|
||||||
|
|
||||||
|
function render_well(well) {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
function svg_text(text) {
|
||||||
|
let node = new SvgNode('text')
|
||||||
|
node.items = [text]
|
||||||
|
node.set_attr('x', 0).set_attr('y', 0)
|
||||||
|
// node.set_attr('style', style)
|
||||||
|
// node.set_attr('stroke', "#fff")
|
||||||
|
// node.set_attr('stroke-width', "1")
|
||||||
|
return node
|
||||||
|
}
|
||||||
|
|
||||||
|
const text_style = 'font-family: Courier new; font-weight:bold; font-size:26px; fill:#000; stroke:#0f0; stroke-width:1'
|
||||||
|
|
||||||
|
map = {
|
||||||
|
layers: [
|
||||||
|
'<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00" />',
|
||||||
|
// '<g>' + wells.map(x => `<circle cx="${x.whx}" cy="${x.why}" r="5" strokeWidth="1" stroke="#f00" fill="none" />`).join('') + '</g>',
|
||||||
|
// '<path d="M0 0 L{0} 0 A {0} {0} 0 {3} 0 {1} {2} z"/>',
|
||||||
|
// '<circle cx="200" cy="200" r="50" stroke-width="25" stroke-dasharray="180" stroke-dashoffset="180" stroke="#f00" fill="none" />'
|
||||||
|
// sector(100, 0, 290),
|
||||||
|
// sector(50, 90, 360),
|
||||||
|
// svg_ring_sector(50, 100, 0, 290).set_attr(style).render(),
|
||||||
|
// svg_ring_sector(50, 100, 290, 360).set_attr(style2).render(),
|
||||||
|
// circle(15).set_attr(style3).render(),
|
||||||
|
// '<text x="10" y="-10" style="font-family: Courier new; font-weight:bold; font-size:26px; fill:#000" stroke="#fff" stroke-width="1">G-504</text>',
|
||||||
|
// render_fault(fault).set_attr(style_fault).render(),
|
||||||
|
// render_contour(vnk1).set_attr(style_vnk).render(),
|
||||||
|
// svg_text('Hallo world', text_style).render()
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
||||||
|
let cur_map = ''
|
||||||
|
|
||||||
|
|
||||||
|
function save() {
|
||||||
|
download('file.svg', cur_map)
|
||||||
|
}
|
||||||
|
|
||||||
|
// document.getElementById('map').innerHTML = render_map(map)
|
||||||
|
|
||||||
|
const query = 'SELECT * FROM wells WHERE whx < 2000 AND why < 2000'
|
||||||
|
axios.post('http://localhost:4000/proxy/sqlite', { query }).then(x => x.data)
|
||||||
|
.then(wells => {
|
||||||
|
|
||||||
|
let layer_wells = wells.map(w => circle(15).set_style(style_wellhead).move(w.whx, w.why).render())
|
||||||
|
let layer_wells_wpr = wells.map(w => svg_sector(70, 0, 70).set_style(style_wir).move(w.whx, w.why).render())
|
||||||
|
|
||||||
|
let layer_wells_gpr = wells.map(w => svg_sector(70, 70, 130).set_style(style_gpr).move(w.whx, w.why).render())
|
||||||
|
let layer_wells_opr = wells.map(w => svg_sector(70, 130, 360).set_style(style_opr).move(w.whx, w.why).render())
|
||||||
|
|
||||||
|
let layer_well_names = wells.map(w => svg_text(w.well).set_style(style_wellhead_text).move(w.whx + 10, w.why - 10).render())
|
||||||
|
// let layers = [...layer_wells, ...layer_wells_wpr, ...layer_well_names]
|
||||||
|
// let layers = layer_wells_wpr
|
||||||
|
let layers = [...layer_wells_wpr, ...layer_wells_gpr, ...layer_wells_opr, ...layer_wells, ...layer_well_names,
|
||||||
|
render_fault(fault).set_attr(style_fault).render(),
|
||||||
|
render_contour(vnk1).set_attr(style_vnk).render()
|
||||||
|
]
|
||||||
|
|
||||||
|
cur_map = render_map({ layers })
|
||||||
|
document.getElementById('map').innerHTML = cur_map
|
||||||
|
|
||||||
|
new SvgMap(document.getElementById('svg'))
|
||||||
|
})
|
||||||
|
|
||||||
|
|
||||||
|
class SvgMap {
|
||||||
|
constructor(el) {
|
||||||
|
this.el = el
|
||||||
|
this.scale = 1
|
||||||
|
this.pos = { x: 0, y: 0 }
|
||||||
|
console.log(el)
|
||||||
|
this.el.onwheel = this.handle_wheel.bind(this)
|
||||||
|
this.el.onmousedown = this.handle_mousedown.bind(this)
|
||||||
|
this.el.onmousemove = this.handle_mousemove.bind(this)
|
||||||
|
this.el.onmouseup = this.handle_mouseup.bind(this)
|
||||||
|
|
||||||
|
this.is_down = false
|
||||||
|
|
||||||
|
this.set_scale(1)
|
||||||
|
}
|
||||||
|
|
||||||
|
handle_mousedown(event) {
|
||||||
|
this.is_down = true
|
||||||
|
this.downin = { x: event.clientX, y: event.clientY }
|
||||||
|
console.log(event)
|
||||||
|
// clientX: 451, clientY: 297
|
||||||
|
// layerX: 451, layerY: 297
|
||||||
|
}
|
||||||
|
|
||||||
|
handle_mousemove(event) {
|
||||||
|
if (this.is_down) {
|
||||||
|
event.preventDefault()
|
||||||
|
let dx = event.clientX - this.downin.x
|
||||||
|
let dy = event.clientY - this.downin.y
|
||||||
|
|
||||||
|
this.pos.x -= dx * this.scale
|
||||||
|
this.pos.y -= dy * this.scale
|
||||||
|
this.set_scale(this.scale)
|
||||||
|
this.downin = { x: event.clientX, y: event.clientY }
|
||||||
|
// this.downin = {x: event.clientX, y: event.clientY}
|
||||||
|
}
|
||||||
|
// console.log(event.target.tagName)
|
||||||
|
}
|
||||||
|
|
||||||
|
handle_mouseup(event) {
|
||||||
|
this.is_down = false
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
handle_wheel(event) {
|
||||||
|
event.preventDefault()
|
||||||
|
|
||||||
|
if (event.ctrlKey) {
|
||||||
|
if (event.deltaY > 0) {
|
||||||
|
this.scale_up()
|
||||||
|
}
|
||||||
|
else
|
||||||
|
this.scale_down()
|
||||||
|
}
|
||||||
|
|
||||||
|
else if (event.shiftKey) {
|
||||||
|
console.log('shifted')
|
||||||
|
}
|
||||||
|
|
||||||
|
else {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log(event)
|
||||||
|
}
|
||||||
|
|
||||||
|
set_scale(scale) {
|
||||||
|
this.scale = scale
|
||||||
|
this.el.setAttribute("viewBox", `${this.pos.x} ${this.pos.y} ${2000 * this.scale} ${2000 * this.scale}`)
|
||||||
|
}
|
||||||
|
|
||||||
|
scale_up() {
|
||||||
|
this.set_scale(this.scale * 1.1)
|
||||||
|
}
|
||||||
|
|
||||||
|
scale_down() {
|
||||||
|
this.set_scale(this.scale * 0.9)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
function handle_wheel(event) {
|
||||||
|
event.preventDefault()
|
||||||
|
console.log(event.deltaY)
|
||||||
|
console.log(event)
|
||||||
|
|
||||||
|
document.getElementById('svg').setAttribute("viewBox", "0 0 3000 3000")
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
function scale() {
|
||||||
|
document.getElementById('svg').setAttribute("viewBox", "0 0 3000 3000")
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
Loading…
Reference in New Issue
Block a user