Настройте / отредактируйте svgEdit от Google на моем сайте

вот моя проблема,

Я должен создать собственный интерфейс для редактирования карты. Эти карты являются файлами SVG, я выбрал svgEdit от Google. Но мне нужно настроить его … Я использую jQuery 1.10.x и Bootstrap3

Мне не нужны стандартные функциональные возможности, и я действительно не хочу сохранять стандартный интерфейс svgEdit, мне нужно упростить его, мне просто нужны некоторые функциональные возможности, и я должен удалить панели инструментов & так далее … сделать редактор совсем пустым … кнопки & функциональные возможности должны быть выведены из внешнего интерфейса, они находятся на странице контейнера, но они должны быть вне iframe svgEdit … (возможно ли это?)

Для редактора мне просто нужны эти функции:

• Я должен установить холст по умолчанию (карту) при щелчке по списку (когда я выбираю карту, она должна появиться в инструменте svgEdit — у меня есть карта, файл svg, на моем сервере)

• Я должен установить основное изображение так, чтобы оно идеально подходило холсту, не прокручивая x или y далеко от изображения … теперь у меня есть полосы прокрутки вокруг «пустого холста по умолчанию», которое позволяет мне уходить далеко от изображения. и, следовательно, я должен позволить колесу мыши увеличивать / уменьшать масштаб на карте … (которая, по-видимому, отключена по умолчанию …)

• Я должен предоставить пользователю возможность добавить «слой» на карту (у меня есть «псевдоформа» с вводимым текстом и кнопкой подтверждения, при нажатии на нее следует добавить пустой слой на главной карте). который затем является «текущим слоем») … Пользователь должен иметь возможность добавлять столько слоев, сколько он хочет … и отображать те, которые он хочет …

• Я должен позволить пользователю добавить некоторые значки путем перетаскивания&перетащите ИЛИ нажмите на изображение, затем нажмите на холст, чтобы разместить его в любом месте на текущем слое (не на карте, на слое), нарисуйте линию, многоугольник, добавьте текст на текущий слой и сохраните эти объекты на слое. (тогда я должен позволить возможность редактировать / удалять эти объекты)

• Мне также нужна кнопка «Сохранить», которая сохраняет текущие слои на моем сервере.

Ну, я не знаю, возможно ли все, о чем я говорю, но это то, что я пытаюсь сделать. Вот, например, краткое представление о том, как должна выглядеть страница (Bootstrap внутри …):

<div class="panel panel-success" style="margin-top:30px;">
<div class="panel-heading">
<a class="btn btn-success" href="#" title="Add Map" style="float:right;">Add a new Map</a>
<h3>Maps : </h3>
</div>
<div class="panel-body" style="text-align:center;">
<div class="col-lg-4" style="border-right:1px dotted grey;">
<fieldset class="borderShadOne" style="margin-bottom:20px;">
<legend>
Select Place :
</legend>
<div class="input-group">
<span class="input-group-addon">
Map :
</span>
<select class="form-control" name="mapChoice" id="mapChoice">
</select>
</div>
</fieldset>
<fieldset class="borderShadOne" style="margin-bottom:20px;">
<legend>
Display Layers :
</legend>
<label class='btn col-lg-6' style='text-align:left;'><input type='checkbox' style='width:10px;float:left;' class='displayLayer' name='displayLayer' value='1'/>&nbsp;&nbsp;&nbsp;Layer 1 </label>
<label class='btn col-lg-6' style='text-align:left;'><input type='checkbox' style='width:10px;float:left;' class='displayLayer' name='displayLayer' value='2'/>&nbsp;&nbsp;&nbsp;Layer 2</label>
</fieldset>
<fieldset class="borderShadOne" style="margin-bottom:20px;">
<legend>
Add New Layer :
</legend>
<div class="input-group">
<span class="input-group-addon">
Layer Name :
</span>
<input class="form-control" type="text" name="newLayerName" id="newLayerName" value=""/>
</div>
<br>
<div style="text-align:right;">
<label class="btn btn-success" id="send_name_layer">Confirm</label>
</div>
<br>
</fieldset>
<fieldset class="borderShadOne" style="margin-bottom:20px;">
<legend>
Layer Edit :
</legend>
<div class="input-group">
<span class="input-group-addon">
Layer to Edit :
</span>
<select class="form-control" type="text" name="currentLayerToEdit" id="currentLayerToEdit">
<option value="0">None</option>
<option value="1">Layer 1</option>
<option value="2">Layer 2</option>
</select>
</div>
<br>
<fieldset style="margin-left:10px;">
<legend style="text-align:left;">
Icons :
</legend>
<label style="height:32px;width:32px;float:left;margin-left:10px;">
<a href="#" class="thumbnail" style="float:left;padding:0;"><img class="icon" style="width:24px;height:24px;" src="./files/icons/icon1.jpg" alt="" title="Icon1"/></a>
</label>
<label style="height:32px;width:32px;float:left;margin-left:10px;">
<a href="#" class="thumbnail" style="float:left;padding:0;"><img class="icon" style="width:24px;height:24px;" src="./files/icons/icon2.jpg" alt="" title=""/></a>
</label>
<br>
<label class="info small italic">
Drag & drop on the "current Layer"</label>
</fieldset>
<br>
<fieldset style="margin-left:10px;">
<legend style="text-align:left;">
Tools :
</legend>
<label class="btn btn-warning" id="toolline" style="float:left;margin-left:5px;margin-right:5px;"><i class="fa fa-pencil"></i>&nbsp;|&nbsp;Draw a Line</label>
<label class="btn btn-info" id="toolselector" style="float:left;margin-left:5px;margin-right:5px;"><i class="fa fa-location-arrow"></i>&nbsp;|&nbsp;Select Objects</label>
<label class="btn btn-danger" id="tooltext" style="float:left;margin-left:5px;margin-right:5px;"><i class="fa fa-bold"></i>&nbsp;|&nbsp;Add Text</label>
<label class="btn btn-default" id="toolpolygon" style="float:left;margin-left:5px;margin-right:5px;"><i class="fa fa-square"></i>&nbsp;|&nbsp;Draw Polygon</label>
</fieldset>
</fieldset>
</div>
<div class="col-lg-8">
<div class="row col-lg-12">
<b><i>Display box : </i></b>
</div>
<div style="clear:both;"></div>
<div class="mixSize" style="border:1px solid black;position:relative;margin:0 auto;max-width:1000px;width:100%;border-radius:8px;">
<iframe class="svgEditIframe" src='./js/svgedit26/svg-editor.html' width=100% height=100% ></iframe>
</div>
<br>
<div>
<div class="col-lg-6">
<fieldset>
<legend>
What I am doing :
</legend>
<!-- Should here display information about what I am doing, what is selected, give possibility to save Layer or delete selected items on it -->
</fieldset>
</div>
</div>
</div>
</div>

Вот немного CSS …
(главное — это «: before», которое заставляет мой контейнер svgEdit иметь высоту, равную его ширине …)

<style>
.mixSize:before{
content:"";
display:block;
padding-top:80%;
}
.svgEditIframe{
position:absolute;
top:0;
left:0;
height:100%;
width:100%;
}
</style>

Спасибо за чтение, спасибо за помощь!