这是我的问题，
我必须构建一个用于地图编辑的自定义界面。这些地图是svg文件，我选择了谷歌的svgEdit。但我需要自定义它...我使用jQuery 1.10.x和Bootstrap3
我不需要默认的功能，我不想保留标准的svgEdit接口，我需要简化它，我只需要一些功能，我必须删除工具栏和放大器。所以...让编辑器空了......按钮＆amp;函数必须外化，它们在容器页面上，但它们必须在svgEdit iframe之外......（可能吗？）
对于编辑器，我只需要这些功能：
我必须在列表上单击设置默认画布（地图）（当我选择地图时，它必须出现在svgEdit工具上 - 我在我的服务器上有地图，svg文件）
我必须设置主图像以完全适合画布，没有滚动x或y远离图像...现在我有＃34;默认空白画布周围的滚动条＆＃34;这让我远离图像...因此，我应该允许鼠标滚轮在地图上放大/缩小...（默认情况下似乎禁用了......）
我必须让用户添加＆＃34;层＆＃34;在地图上（我有一个＆＃34;伪形式＆＃34;带有输入文本和确认按钮，点击它时，它应该在主地图上添加一个空图层，然后是＆＃34;当前layer＆＃34;）...用户应该可以添加他想要的任意数量的图层...并显示他想要的图层...
我必须让用户通过拖放添加一些图标或单击图像然后单击画布将其放置在当前图层上的任何位置（不在地图上，在图层上），画一条线，一个多边形，并在当前图层上添加文本并将这些对象保存在图层上（然后我必须让编辑/删除这些对象的可能性）
我还需要一个＆＃34; save＆＃34;保存当前图层的按钮。
好吧，我真的不知道我所谈论的是否只是可能的，但这就是我试着去做的事情。去做。例如，这是一个关于页面应该是什么样子的简短概念（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'/> 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'/> 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> | 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> | 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> | 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> | 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 ...... （主要的是这个＆＃34;：之前＆＃34;它允许我的svgEdit容器将高度设置为其宽度......）
<style>
.mixSize:before{
content:"";
display:block;
padding-top:80%;
}
.svgEditIframe{
position:absolute;
top:0;
left:0;
height:100%;
width:100%;
}
</style>
感谢阅读，谢谢你的帮助！