[問題] 用svgedit等類的可上傳svg和div網頁
請教大家
想做一個網頁
1.給予客戶端用svgedit等類的svg編輯軟體
接受其svg碼(這目前以ok)
2.然後在一個空白網頁
客戶端可以將上傳的svg依據他的需要
擺在適合的位置
svg每個客戶端的要有部分重疊位置是可以接受的
(這也ok了！但是越多文檔存在mysql後在取出來的繪製次數有點頻繁)
3.再加上一些div的區塊
(用div是想利用他可以放入任何素材如圖片影片flash等)(這當然沒問題)
但是........
問題就在於
svg和div各要製作其onclick的動作
svg以劃圓為例
兩個圓圈的click事件並不會互相干擾
但是div會遮到svg或者svg會遮到div的事件
感謝建議用d3.js來製作
但是我剛剛看了一下
這要特殊的語法
無法讓人自由上傳
一般做好的svg語法文檔
且div可以包含很多素材好像也是不可或缺的
不知道可以給我什麼建議(還是有什麼新的方向?)
PS:目前不用像以前用embed放入svg直接可放入到網頁(html5?)
我試過
<svg>
<svg></svg>
</svg>
也就是svg裡面擺svg
這本來在firefox 10 和opera(部分ok部分不ok)可以正常顯示跟svg、div彼此不遮蓋
但是firefox 11~13就不行了！會被div遮蓋
不知道是怎麼一回事???
我程式碼如下 包含兩個圓 和一個div方塊
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="keywords" content="jquery,ui,easy,easyui,web">
<meta name="description" content="easyui help you build your web page
easily!">
<title>jQuery EasyUI Demo</title>
<script type="text/javascript" src="jquery-1.7.js"></script>
<script type="text/javascript">
$(function() {
window.runcircle1=function(evt){
alert("circle按到1");
}
window.runcircle2=function(evt){
alert("circle按到2");
}
$(".outdiv").click(function(){
alert("jquery的div onclick");
});
});
</script>
</head>
<body>
<div class="outdiv"
style="position:absolute; z-index:1;background-color:yellow;border:5px solid
red;top:100;left:100;height:200px; width:250px; ">
</div>
<div style="position:absolute; z-index:2;">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500"
height="200" width="400" y="100" x="100" title="svg2" >
<circle id="circleid" title="circle1" stroke-width="20" stroke="red"
fill="none" r="150" cy="250" cx="250" onclick="runcircle1(evt)" />
<circle id="circleid2" title="circle2" stroke-width="20" stroke="blue"
fill="none" r="150" cy="200" cx="200" onclick="runcircle2(evt)" />
</svg>
</div>
</body>
--
寧願天空是藍色～
也不願心情是藍的！
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 61.58.177.160