我有一个简单的任务＆＃34;记住，我有一个在QGIS中创建的原始GML / XML，我使用xsl将其转换为html，到目前为止还可以。现在我有一张包含XML数据的表和一张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"/>
svg文件是这样的（这是因为太长了，但我觉得它提出了一个好主意：
<?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>
现在是GML / XML（再次是它的一部分，我消除了坐标的必须）
{{1}}
答案 0 :(得分：0)
以下是三个代码段，基于您的代码段，第一个是XSLT样式表，它将XML文档作为主输入文档，SVG文档作为参数，然后使用内联SVG将XML和SVG转换为HTML ，其中SVG路径元素具有onmouseover / onmouseout事件处理程序属性以突出显示相应表行的背景颜色与数据，假设SVG路径元素和输入XML {{1元素具有相应的rd属性，基于这些id属性，元素被突出显示（在XSLT为SVG id添加前缀id之后，以避免碰撞完整的HTML + SVG文档的单个id命名空间：
path这是XML：
<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>
SVG：
<?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>
在线示例位于https://martin-honnen.github.io/xslt/2017/test2017060301.xml，适用于Windows 10上的IE，Edge，Chrome和Firefox的单行数据。