如何突出svg

时间:2016-07-27 13:48:17

标签: javascript android svg android-webview

我们希望在地图上显示建筑物中特定物品(计算机,监视器等)的位置。 地图应该浏览地图的不同图层。

//编辑:
我们不想为每种可能性重新绘制每一个svg 我不知道怎么告诉svg它应该自己改变特定房间的颜色。
我想知道如何从建筑物的概述链接到特定的房间,以引导用户到位置 作为一个例子,我知道我正在寻找一张3014房间的桌子,这个房间号码我可以得到这张桌子位于该楼层#14房间的第三层楼的信息。

我们svg的一个例子



<?xml version="1.0" encoding="UTF-8" standalone="no"?>

<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   width="100%"
   height="100%"
   viewBox="0 0 744.09448819 1052.3622047"
   id="svg2"
   version="1.1"
   inkscape:version="0.91 r13725"
   sodipodi:docname="TestSVG.svg">
  <defs
     id="defs4" />
  <sodipodi:namedview
     id="base"
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1.0"
     inkscape:pageopacity="0.0"
     inkscape:pageshadow="2"
     inkscape:zoom="0.98994949"
     inkscape:cx="359.93433"
     inkscape:cy="691.62776"
     inkscape:document-units="px"
     inkscape:current-layer="layer1"
     showgrid="false"
     inkscape:window-width="1280"
     inkscape:window-height="657"
     inkscape:window-x="-8"
     inkscape:window-y="-8"
     inkscape:window-maximized="1" />
  <metadata
     id="metadata7">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title></dc:title>
      </cc:Work>
    </rdf:RDF>
  </metadata>
   <defs>
  <script type="text/javascript">
    <![CDATA[
    var a = document.getElementById('svg2');
    a.addEventListener('load', function(){
      var rooms = document.getElementById('layer1').childNodes;
        for (var i = 0; i < rooms.length; i++) {
          rooms[i].addEventListener('click', function(e){
            var node = e.target;
            alert(node.id);
          });
        }
    })

      function showRoom(e) {
        var node = e.target;
        alert(node.id);
      }
    ]]>
    </script>
 </defs>
  <g
     inkscape:label="Ebene 1"
     inkscape:groupmode="layer"
     id="layer1"
     style="display:inline">
    <path
       style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
       d="m 245.71428,506.64792 0,220 225.71428,0 -2.85714,-217.14286 c -138.4808,-1.13275 -151.99178,-1.74147 -222.85714,-2.85714 z"
       id="path3336"
       inkscape:connector-curvature="0"
       sodipodi:nodetypes="ccccc" />
    <path
       style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
       d="m 245.71428,369.50506 0,-177.14285 220,0 0,180 -220,-2.85714"
       id="path3338"
       inkscape:connector-curvature="0"
       sodipodi:nodetypes="ccccc" />
    <path
       style="opacity:1;fill:#008000;fill-opacity:0.43956048;stroke:#000000;stroke-width:0.94316924;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.2"
       d="m 245.68495,192.33339 0,177.86449 220.96128,0 0,-177.86449 -220.96128,0 z"
       id="Raum1"
       inkscape:connector-curvature="0" />
    <rect
       style="opacity:1;fill:#008000;fill-opacity:0.43956048;stroke:#000000;stroke-width:0.99585056;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.2"
       id="Raum2"
       width="223.45309"
       height="217.37878"
       x="245.41631"
       y="508.81155" />
  </g>
</svg>
&#13;
&#13;
&#13;

以及我们如何在应用中打开svg

    public class JavaScriptInterface {
        Context mContext;

JavaScriptInterface(Context c) {
            mContext = c;
        }

        @JavascriptInterface
        public void showToast(final String room) {
            MapActivity.this.runOnUiThread(new Runnable() {
                @Override
                public void run() {
                    mWebView.loadUrl("file:///android_asset/" + room + ".svg");


                    history.add(mWebView.getUrl());
                }
            });

            Toast.makeText(mContext, room, Toast.LENGTH_SHORT).show();
        }

    }

0 个答案:

没有答案