diff --git a/editor/svg-editor.css b/editor/svg-editor.css index b7e4512f..99925f5b 100644 --- a/editor/svg-editor.css +++ b/editor/svg-editor.css @@ -23,6 +23,9 @@ body { #svg_editor #svgroot { -moz-user-select: none; + position: absolute; + top: 0; + left: 0; } #svg_editor #svgcanvas { @@ -601,6 +604,13 @@ span.zoom_tool { color: #000; } +#background_img { + position: absolute; + top: 0; + left: 0; + text-align: left; +} + #svg_source_editor button, #svg_docprops button { padding: 5px 5px 7px 28px; margin: 5px 20px 0 0; @@ -632,9 +642,6 @@ span.zoom_tool { #tool_source_cancel, #tool_docprops_cancel { background: #E8E8E8 url(images/cancel.png) no-repeat 2px 0; } -olor: black; - opacity: 0.6; -} #tool_source_save, #tool_docprops_save { background: #E8E8E8 url(images/save.png) no-repeat 2px 0; diff --git a/editor/svg-editor.js b/editor/svg-editor.js index 903adea8..87f1e9c1 100644 --- a/editor/svg-editor.js +++ b/editor/svg-editor.js @@ -85,6 +85,15 @@ function svg_edit_setup() { updateContextPanel(); }; + var updateBgImage = function() { + var bg_img = $('#background_img'); + if(!bg_img.length) return; + var img = bg_img.find('img'); + var zoomlevel = svgCanvas.getZoom(); + img.width(zoomlevel*100 + '%'); + + } + var zoomChanged = function(window, bbox) { var scrbar = 15; var res = svgCanvas.getResolution(); @@ -917,12 +926,20 @@ function svg_edit_setup() { var bg_blk = $('#bg_blocks div.cur_background'); if(bg_blk.length) { new_bg = bg_blk.css('background'); + $('#svgcanvas').css('background',new_bg); + $('#background_img').remove(); } else if(bg_url) { - new_bg = '#FFF url("' + bg_url + '") no-repeat'; + if(!$('#background_img').length) { + $('
') + .prependTo('#svgcanvas'); + } else { + $('#background_img img').attr('src',bg_url); + } } else { new_bg = '#FFF'; + $('#svgcanvas').css('background',new_bg); + $('#background_img').remove(); } - $('#svgcanvas').css('background',new_bg); hideDocProperties(); }; @@ -1561,8 +1578,7 @@ function svg_edit_setup() { $('#canvas_height').val(h); centerCanvasIfNeeded(); - - var res = svgCanvas.getResolution(); + setTimeout(updateBgImage,10); if(center) { var w_area = $('#workarea');