当鼠标悬停在svg地图上时，突出显示表格

我有一个“简单的任务”，我在`QGIS中创建了一个原始的GML/XML，我使用xsl将它转换为html，到目前为止确定。现在我有一个XML数据表和一个SVG地图（在线查找），它们彼此相邻。我想要的是，当你点击地图上的任何区域时，用信息突出显示表格行。当鼠标悬停在svg地图上时，突出显示表格

<?xml version="1.0"?> 
    <xsl:stylesheet version="1.0" 
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform" 
    xmlns:gml="http://www.opengis.net/gml" 
    xmlns:ogr="http://ogr.maptools.org/"> 


    <xsl:output method="html" version="4.0" encoding="UTF-8" indent="yes"/> 

    <xsl:template match="/"> 
     <html> 
     <head> 
      <meta http-equiv="content-language" content="eng" /> 
      <meta name="author" content="none"/> 
      <link href="./style.css" rel="stylesheet" type="text/css"/> 

     </head> 

     <body> 

      <div> 
       <header> 
        <h1>Inhabitants</h1> 
       </header> 
      </div> 

      <div id="container"> 

       <div id="map_area"> 
        <div id="innermap_area"> 
         <embed src="dr_map.svg" width="800px" height="600" type="image/svg+xml"> </embed> 
        </div> 
       </div> 

       <div id="info"> 
        <div id="innerinfo"> 
         <table> 
         <tr bgcolor="#C3CEC6"> 
          <th>Province name</th> 
          <th>Total inhabitants</th>   
          <th>Female</th> 
          <th>Male</th> 

         </tr> 
          <xsl:for-each select="//gml:featureMember"> 
          <tr> 
           <td><xsl:value-of select="ogr:rd/ogr:TOPONIMIA"/></td> 
           <td><xsl:value-of select="ogr:rd/ogr:Casos"/></td>     
           <td><xsl:value-of select="ogr:rd/ogr:Mujeres"/></td> 
           <td><xsl:value-of select="ogr:rd/ogr:Hombres"/></td> 
          </tr> 
          </xsl:for-each> 
         </table> 
        </div> 
       </div> 
      </div> 
     <div><footer> 2017 </footer></div> 

     </body> 
     </html> 
    </xsl:template> 


    </xsl:stylesheet>

SVG文件是这样的（这被切断，因为太长，但我认为它给一个好主意：

<?xml version="1.0" encoding="utf-8"?> 
<svg xmlns="http://www.w3.org/2000/svg" xmlns:amcharts="http://amcharts.com/ammap" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"> 
    <defs> 
     <style type="text/css"> 
      .land 
      { 
       fill: #CCCCCC; 
       fill-opacity: 1; 
       stroke:white; 
       stroke-opacity: 1; 
       stroke-width:1; 
       display:block; 
      } 
      .land:hover 
      { 
       fill: blue; 
       cursor: pointer; 
      } 
     </style> 

     <dr_map projection="mercator" leftLongitude="-72.004173" topLatitude="19.932499" rightLongitude="-68.322347" bottomLatitude="17.470139"></dr_map> 

    </defs> 
    <g> 
     <path id="DO-01" title="Distrito Nacional" class="land" d="M435.2,341.16l0.17,-2.24l2.37,-2.49l-0.13,-5.53l-1.32,-1.8l-5.01,-3.59l-1.32,-2.35l2.77,-1.52v-2.49l1.19,-2.76l1.72,-1.24l2.37,0.97l1.19,1.8l0.66,2.9l2.24,1.11l2.37,3.18l3.3,-1.38l7.65,-1.52l3.17,2.07v1.8l-1.85,3.46l0.3,2.37l0,0l-1.79,-0.25l-2.21,1.63l-4.24,1.57l-2.21,3.01l-2.45,1.25l-6.75,2.07H435.2z"/>

现在GML/XML （再一次它，我消除了必须的坐标）

<?xml version="1.0" encoding="utf-8" ?> 
<?xml-stylesheet href="processing.xsl" type="text/xsl"?> 
<FeatureCollection 
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
    xsi:schemaLocation="" 
    xmlns="http://ogr.maptools.org/" 
    xmlns:gml="http://www.opengis.net/gml"> 
    <gml:name>province</gml:name> 
    <gml:boundedBy> 
    <gml:Box> 
     <gml:coord><gml:X>182215.7655999996</gml:X><gml:Y>1933511.9638</gml:Y></gml:coord> 
     <gml:coord><gml:X>571429.3273</gml:X><gml:Y>2205216.25</gml:Y></gml:coord> 
    </gml:Box> 
    </gml:boundedBy>                           
    <gml:featureMember> 
    <rd id="DO-01"> 
     <geometryProperty><gml:MultiPolygon srsName="EPSG:32619"><gml:polygonMember><gml:Polygon><gml:outerBoundaryIs><gml:LinearRing><gml:coordinates>397122.65139999986,2050791.921 397142.0132,2050790.208699999 </gml:coordinates></gml:LinearRing></gml:outerBoundaryIs></gml:Polygon></gml:polygonMember></gml:MultiPolygon></geometryProperty> 
     <PROV>01</PROV> 
     <TOPONIMIA>DISTRITO NACIONAL</TOPONIMIA> 
     <Hombres>460903</Hombres> 
     <Mujeres>504137</Mujeres> 
     <Casos>965040</Casos> 
    </rd> 
</FeatureCollection>

来源

2017-06-02 Alicia Rijo

那么，如何将SVG元素与HTML表格行相关联？ 'path id =“DO-01”'是否涉及'rd id =“DO-01”'？你或者至少可以重新创建SVG地图来添加链接和/或Javascript，以便突出显示被实现？ –

我想要这样的东西：https：//stackoverflow.com/questions/36332818/fill-svg-path-on-table-row-hover？rq = 1我尝试它，但在xslt structucture –

无法正常工作好吧，那个例子有内联的SVG，并没有被'embed'元素引用，所以使用CSS和Javascript更容易实现。它在mouseover上工作，而不是onclick。 –

这里有三个基于片段的代码片断，第一个是XSLT样式表，它将XML文档作为主要输入文档，将SVG文档作为参数，然后将XML和SVG转换为带有内联SVG的HTML，其中SVG路径元素具有事件处理程序属性，用于突出显示相应表格行与数据的背景颜色，它假定SVG路径元素和输入XML元素具有相应的id属性，基于这些属性的id属性元素被突出显示（在XSLT已经为SVG path添加了前缀id，以避免在完整的HTML + SVG文档的单个id命名空间中发生冲突）：

<xsl:stylesheet version="1.0" 
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform" 
    xmlns:gml="http://www.opengis.net/gml" 
    xmlns:ogr="http://ogr.maptools.org/" 
    xmlns:svg="http://www.w3.org/2000/svg" 
    exclude-result-prefixes="gml ogr"> 

    <xsl:param name="svg-uri" select="'test2017060301.svg'"/> 
    <xsl:param name="svg-doc" select="document($svg-uri)"/> 

    <xsl:param name="hover-color" select="'#CCC'"/> 

    <xsl:param name="svg-width" select="800"/> 
    <xsl:param name="svg-height" select="600"/> 

    <xsl:param name="id-prefix" select="'path-'"/> 

    <xsl:output method="html" version="5.0" encoding="UTF-8" indent="yes" doctype-system="about:legacy-compat"/> 

    <xsl:template match="/"> 
     <html> 
      <head> 
       <title>Example</title> 
       <script> 
        function hover(element, backgroundColor) { 
         element.style.backgroundColor = backgroundColor; 
        } 
        function unhover(element) { 
         element.style.backgroundColor = ''; 
        } 
       </script> 
      </head> 

      <body> 

       <div> 
        <header> 
         <h1>Inhabitants</h1> 
        </header> 
       </div> 

       <div id="container"> 

        <div id="map_area"> 
         <div id="innermap_area"> 
          <xsl:apply-templates select="$svg-doc/*" mode="svg"> 
           <xsl:with-param name="width" select="$svg-width"/> 
           <xsl:with-param name="height" select="$svg-width"/> 
          </xsl:apply-templates> 
         </div> 
        </div> 

        <div id="info"> 
         <div id="innerinfo"> 
          <table> 
           <tr bgcolor="#C3CEC6"> 
            <th>Province name</th> 
            <th>Total inhabitants</th>   
            <th>Female</th> 
            <th>Male</th> 

           </tr> 
           <xsl:for-each select="//gml:featureMember"> 
            <tr id="{ogr:rd/@id}"> 
             <td><xsl:value-of select="ogr:rd/ogr:TOPONIMIA"/></td> 
             <td><xsl:value-of select="ogr:rd/ogr:Casos"/></td>     
             <td><xsl:value-of select="ogr:rd/ogr:Mujeres"/></td> 
             <td><xsl:value-of select="ogr:rd/ogr:Hombres"/></td> 
            </tr> 
           </xsl:for-each> 
          </table> 
         </div> 
        </div> 
       </div> 
       <div><footer> 2017 </footer></div> 

      </body> 
     </html> 
    </xsl:template> 

    <xsl:template match="@* | node()" mode="svg"> 
     <xsl:copy> 
      <xsl:apply-templates select="@* | node()" mode="svg"/> 
     </xsl:copy> 
    </xsl:template> 

    <xsl:template match="svg:svg" mode="svg"> 
     <xsl:param name="width" select="$svg-width"/> 
     <xsl:param name="height" select="$svg-height"/> 
     <xsl:copy> 
      <xsl:copy-of select="@*"/> 
      <xsl:attribute name="width"> 
       <xsl:value-of select="$width"/> 
      </xsl:attribute> 
      <xsl:attribute name="height"> 
       <xsl:value-of select="$height"/> 
      </xsl:attribute> 
      <xsl:apply-templates mode="svg"/> 
     </xsl:copy> 
    </xsl:template> 

    <xsl:template match="svg:path" mode="svg"> 
     <xsl:copy> 
      <xsl:copy-of select="@*"/> 
      <xsl:attribute name="id"> 
       <xsl:value-of select="concat($id-prefix, @id)"/> 
      </xsl:attribute> 
      <xsl:attribute name="onmouseover">hover(document.getElementById('<xsl:value-of select="@id"/>'), '<xsl:value-of select="$hover-color"/>');</xsl:attribute> 
      <xsl:attribute name="onmouseout">unhover(document.getElementById('<xsl:value-of select="@id"/>'));</xsl:attribute> 
     </xsl:copy> 
    </xsl:template> 


</xsl:stylesheet>

这里是XML：

<?xml version="1.0" encoding="utf-8" ?> 
<?xml-stylesheet href="test2017060301.xsl" type="text/xsl"?> 
<FeatureCollection 
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
    xsi:schemaLocation="" 
    xmlns="http://ogr.maptools.org/" 
    xmlns:gml="http://www.opengis.net/gml"> 
    <gml:name>province</gml:name> 
    <gml:boundedBy> 
     <gml:Box> 
      <gml:coord><gml:X>182215.7655999996</gml:X><gml:Y>1933511.9638</gml:Y></gml:coord> 
      <gml:coord><gml:X>571429.3273</gml:X><gml:Y>2205216.25</gml:Y></gml:coord> 
     </gml:Box> 
    </gml:boundedBy>                           
    <gml:featureMember> 
     <rd id="DO-01"> 
      <geometryProperty><gml:MultiPolygon srsName="EPSG:32619"><gml:polygonMember><gml:Polygon><gml:outerBoundaryIs><gml:LinearRing><gml:coordinates>397122.65139999986,2050791.921 397142.0132,2050790.208699999 </gml:coordinates></gml:LinearRing></gml:outerBoundaryIs></gml:Polygon></gml:polygonMember></gml:MultiPolygon></geometryProperty> 
      <PROV>01</PROV> 
      <TOPONIMIA>DISTRITO NACIONAL</TOPONIMIA> 
      <Hombres>460903</Hombres> 
      <Mujeres>504137</Mujeres> 
      <Casos>965040</Casos> 
     </rd> 
    </gml:featureMember> 
</FeatureCollection>

而SVG：

<?xml version="1.0" encoding="utf-8"?> 
<svg xmlns="http://www.w3.org/2000/svg" xmlns:amcharts="http://amcharts.com/ammap" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"> 
    <defs> 
     <style type="text/css"> 
      .land 
      { 
      fill: #CCCCCC; 
      fill-opacity: 1; 
      stroke:white; 
      stroke-opacity: 1; 
      stroke-width:1; 
      display:block; 
      } 
      .land:hover 
      { 
      fill: blue; 
      cursor: pointer; 
      } 
     </style> 

     <dr_map projection="mercator" leftLongitude="-72.004173" topLatitude="19.932499" rightLongitude="-68.322347" bottomLatitude="17.470139"></dr_map> 

    </defs> 
    <g> 
     <path id="DO-01" title="Distrito Nacional" class="land" d="M435.2,341.16l0.17,-2.24l2.37,-2.49l-0.13,-5.53l-1.32,-1.8l-5.01,-3.59l-1.32,-2.35l2.77,-1.52v-2.49l1.19,-2.76l1.72,-1.24l2.37,0.97l1.19,1.8l0.66,2.9l2.24,1.11l2.37,3.18l3.3,-1.38l7.65,-1.52l3.17,2.07v1.8l-1.85,3.46l0.3,2.37l0,0l-1.79,-0.25l-2.21,1.63l-4.24,1.57l-2.21,3.01l-2.45,1.25l-6.75,2.07H435.2z"/> 
    </g> 
</svg>

在线样本是https://martin-honnen.github.io/xslt/2017/test2017060301.xml和工程与IE，边缘，Chrome和Firefox的Windows数据的单行10.

来源

2017-06-03 14:11:45

这正是我想要的！但是，在复制代码后，它们看起来不会正常运行，只有没有格式的数据。 –

“复制代码后，他们似乎没有正常运行，只有没有格式的数据”请参阅我发布的例子或您尝试去适应它？无论如何，您需要更详细地解释这意味着什么，如果您已经调整了发布的解决方案并遇到问题，那么请考虑编辑您的问题，并向我们展示您现在具有的代码，并准确解释哪些不起作用。 –

我的坏，我适应了我原来的一个，它没有运行，因为SVG的名称是错的！，愚蠢的我和错字的错误！非常感谢你花时间帮助我:) –

当鼠标悬停在svg地图上时，突出显示表格

回答

相关问题