1. 首页
  2. 问答
  3. 组SVG路径，标签和连接器，用于鼠标悬停

组SVG路径，标签和连接器，用于鼠标悬停

2015-03-19 99 views
0

这里的超链接内是（一部分）我的SVG：组SVG路径，标签和连接器，用于鼠标悬停

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="900" height="400"> 
 
    <style> 
 
    path, rect { fill: #EEEEEE; stroke: #CCCCCC; stroke-width: 1; } 
 
    path:hover, rect:hover { fill: #33CCFF; } 
 
    path.connector, path.connector:hover { fill: none; } 
 
    text { font-family: sans-serif; fill: #666666; } 
 
    </style> 
 
    <!-- New York --> 
 
    <path id="NY" d="m 824.6 181.8 -1.1 -1 -2.6 -0.2 -2.3 -1.9 -1.6 -6.1 -3.5 0.1 -2.4 -2.7 -19.4 4.4 -43 8.7 -7.5 1.2 -0.7 -6.5 1.4 -1.1 1.3 -1.1 1 -1.6 1.8 -1.1 1.9 -1.8 0.5 -1.6 2.1 -2.7 1.1 -1 -0.2 -1 -1.3 -3.1 -1.8 -0.2 -1.9 -6.1 2.9 -1.8 4.4 -1.5 4 -1.3 3.2 -0.5 6.3 -0.2 1.9 1.3 1.6 0.2 2.1 -1.3 2.6 -1.1 5.2 -0.5 2.1 -1.8 1.8 -3.2 1.6 -1.9 2.1 0 1.9 -1.1 0.2 -2.3 -1.5 -2.1 -0.3 -1.5 1.1 -2.1 0 -1.5 -1.8 0 -1.8 -0.8 -0.8 -1.1 -0.2 -2.6 5.8 -5.5 0.6 -0.8 1.5 -2.9 2.9 -4.5 2.7 -3.7 2.1 -2.4 2.4 -1.8 3.1 -1.2 5.5 -1.3 3.2 0.2 4.5 -1.5 7.6 -2.1 0.5 5 2.4 6.5 0.8 5.2 -1 3.9 2.6 4.5 0.8 2.1 -0.8 2.9 2.9 1.3 0.6 0.3 3.1 11 -0.5 5.1 -0.5 10.8 0.8 5.5 0.8 3.6 1.5 7.3 0 8.1 -1.1 2.3 1.8 2 0.8 1.7 -1.9 1.8 0.3 1.3 1.3 -0.3 1.5 -1.3 2.3 -2.6 1.1 -0.6 1.6 0.6 2.3 0.2 7.9 -3.9 2.9 -2.7 1.3 -1.5 4.2 1.6 -3.4 3.6 -3.9 2.9 -7.1 5.3 -2.6 1 -5.8 1.9 -4 1.1 -1.2 -0.5 -0.2 -3.7 0.5 -2.7 -0.2 -2.1 -2.8 -1.7 -4.5 -1 -3.9 -1.1 -3.7 -1.8 z" /> 
 
    <text x="802" y="157.3"> 
 
    <tspan x="802" y="157.3">NY</tspan> 
 
    </text> 
 
    <!-- Michigan --> 
 
    <g id="MI"> 
 
    <path d="m697.9 177.2 -3.2 -8.2 -2.3 -9.1 -2.4 -3.2 -2.6 -1.8 -1.6 1.1 -3.9 1.8 -1.9 5 -2.7 3.7 -1.1 0.6 -1.5 -0.6c0 0 -2.6 -1.5 -2.4 -2.1 0.2 -0.6 0.5 -5 0.5 -5l3.4 -1.3 0.8 -3.4 0.6 -2.6 2.4 -1.6 -0.3 -10 -1.6 -2.3 -1.3 -0.8 -0.8 -2.1 0.8 -0.8 1.6 0.3 0.2 -1.6 -2.4 -2.3 -1.3 -2.6 -2.6 0 -4.5 -1.5 -5.5 -3.4 -2.7 0 -0.6 0.6 -1 -0.5 -3.1 -2.3 -2.9 1.8 -2.9 2.3 0.3 3.6 1 0.3 2.1 0.5 0.5 0.8 -2.6 0.8 -2.6 0.3 -1.5 1.8 -0.3 2.1 0.3 1.6 0.3 5.5 -3.6 2.1 -0.6 -0.2 0 -4.2 1.3 -2.4 0.6 -2.4 -0.8 -0.8 -1.9 0.8 -1 4.2 -2.7 1.1 -1.8 1.9 -0.2 1 0.6 0.8 -0.6 2.6 -2.3 0.5 0 1.1 0.8 2.4 -1.1 6.1 -1.6 4 0.6 4.7 0.5 1.1 -0.8 2.4 -0.3 0.8 -0.3 2.7 3.6 6 2.9 6.5 1.5 4.8 -0.8 4.7 -1 6 -2.4 5.2 -0.3 2.7 -3.3 3.1 4.4 -0.2 21.4 -2.3 7.3 -1 0.1 1.7 6.9 -1.2 10.3 -1.5 3.9 -0.5 0.1 -0.6 0.2 -1.5 2.1 -3.7 2 -1.7 -0.2 -5.1 1.6 -1.6 1.1 -0.3 0.2 -3.6 1.5 -3 1.1 0.6 0.2 0.6 0.8 0.2 1.9 -1 -0.3 -9.5z" /> 
 
    <path d="m581.6 82.1 1.8 -2.1 2.2 -0.8 5.4 -3.9 2.3 -0.6 0.5 0.5 -5.1 5.1 -3.3 1.9 -2.1 0.9 -1.6 -1.1zm86.2 32.1 0.6 2.5 3.2 0.2 1.3 -1.2c0 0 -0.1 -1.5 -0.4 -1.6 -0.3 -0.2 -1.6 -1.9 -1.6 -1.9l-2.2 0.2 -1.6 0.2 -0.3 1.1 1 0.5zm-100.3 -3 0.7 -0.6 2.7 -0.8 3.6 -2.3 0 -1 0.6 -0.6 6 -1 2.4 -1.9 4.4 -2.1 0.2 -1.3 1.9 -2.9 1.8 -0.8 1.3 -1.8 2.3 -2.3 4.4 -2.4 4.7 -0.5 1.1 1.1 -0.3 1 -3.7 1 -1.5 3.1 -2.3 0.8 -0.5 2.4 -2.4 3.2 -0.3 2.6 0.8 0.5 1 -1.1 3.6 -2.9 1.3 1.3 2.3 0 3.2 1 1.5 1.1 1.5 3.1 2.7 2.7 3.9 -0.2 1.5 -1 1.6 1.3 1.6 0.5 1.3 -0.8 1.1 0 1.6 -1 4 -3.6 3.4 -1.1 6.6 -0.3 4.5 -1.9 2.6 -1.3 1.5 0.2 0 5.7 0.5 0.3 2.9 0.8 1.9 -0.5 6.1 -1.6 1.1 -1.1 1.5 0.5 0 7 3.2 3.1 1.3 0.6 1.3 1 -1.3 0.3 -0.8 -0.3 -3.7 -0.5 -2.1 0.6 -2.3 -0.2 -3.2 1.5 -1.8 0 -5.8 -1.3 -5.2 0.2 -1.9 2.6 -7 0.6 -2.4 0.8 -1.1 3.1 -1.3 1.1 -0.5 -0.2 -1.5 -1.6 -4.5 2.4 -0.6 0 -1.1 -1.6 -0.8 0.2 -1.9 4.4 -1 4 -3.2 7 -1.2 -1 -1.4 -1 -1.9 -10.3 -3.5 -1.4 -2.1 -2.3 -12.1 -2.7 -2.9 -1 -8.2 -2.2 -7.9 -1.1 -3.7 -5.1z" /> 
 
    </g> 
 
    <text x="642.6" y="182.6"> 
 
    <tspan x="642.6" y="182.6">MI</tspan> 
 
    </text> 
 
    <!-- Vermont --> 
 
    <g> 
 
    <path d="m 838.7 147.2 0.3 -5.3 -2.9 -10.8 -0.6 -0.3 -2.9 -1.3 0.8 -2.9 -0.8 -2.1 -2.7 -4.6 1 -3.9 -0.8 -5.2 -2.4 -6.5 -0.8 -4.9 26.4 -6.7 0.3 5.5 1.9 2.7 0 4 -3.7 5.1 -2.6 1.1 -0 1.1 1.3 1.5 -0.3 8.1 -0.6 9.3 -0.2 5.6 1 1.3 -0.2 4.6 -0.5 1.7 1 0.7 -7.4 1.5 -4.5 0.7 z" id="VT" /> 
 
    <rect rx="5.2" ry="5" y="39.2" x="722.8" height="30" width="55" /> 
 
    </g> 
 
    <text x="738" y="61.6"> 
 
    <tspan x="738" y="61.6">VT</tspan> 
 
    </text> 
 
    <path d="m 838.4 96.9 0 -15.6 -88.1 0 0 -12.1" class="connector" /> 
 
    <!-- New Hampshire --> 
 
    <g> 
 
    <path d="m 875 135.5 0.9 -1.1 1.1 -3.3 -2.5 -0.9 -0.5 -3.1 -3.9 -1.1 -0.3 -2.7 -7.3 -23.4 -4.6 -14.5 -0.9 -0 -0.6 1.6 -0.6 -0.5 -1 -1 -1.5 1.9 -0 5 0.3 5.7 1.9 2.7 0 4 -3.7 5.1 -2.6 1.1 0 1.1 1.1 1.8 0 8.6 -0.8 9.2 -0.2 4.8 1 1.3 -0.2 4.5 -0.5 1.8 1 0.7 16.8 -4.4 2.2 -0.6 1.8 -2.8 3.6 -1.6 z"id="NH" /> 
 
    <rect rx="5.2" ry="5" y="39.2" x="788.2" height="30" width="55" /> 
 
    </g> 
 
    <text x="802.1" y="61.6"> 
 
    <tspan x="802.1" y="61.6">NH</tspan> 
 
    </text> 
 
    <path d="m 855.5 86.9 0 -32.7 -12.3 0" class="connector" /> 
 
</svg>

注意，鼠标移到仅影响路径或低于鼠标的标签。我想要以下行为：

  • 将路径和标签（rect + text）分组在一个超链接内，例如<a href="/VT/">...</a>使得点击路径或标签打开对应的页面
  • 将鼠标悬停在标签激活相应的路径（一个或多个）和反之亦然

的SVG将被解析和超链接将使用被添加XML解析器如此黑客是不可接受的。

来源

2015-03-19 Salman A

+0

我很失望，你喜欢用现成的解决方案，而不是所描述的解决方案通常一步 – 2015-03-20 10:49:48

回答

2

这里有一个拿到这个。

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="900" height="400"> 
 
    <style> 
 
    a { 
 
     fill: #EEEEEE; 
 
     stroke: #CCCCCC; 
 
     stroke-width: 1; 
 
    } 
 
    a:hover { 
 
     fill: #33CCFF; 
 
    } 
 
    path.connector { 
 
     fill: none; 
 
     stroke: #CCCCCC; 
 
     stroke-width: 1; 
 
    } 
 
    a:hover path.connector { 
 
     stroke: #33CCFF; 
 
    } 
 
    text { 
 
     font-family: sans-serif; 
 
     fill: #666666; 
 
     pointer-events: none; 
 
    } 
 
    </style> 
 
    <!-- New York --> 
 
    <a xlink:href="/NY/"> 
 
    <path id="NY" d="m 824.6 181.8 -1.1 -1 -2.6 -0.2 -2.3 -1.9 -1.6 -6.1 -3.5 0.1 -2.4 -2.7 -19.4 4.4 -43 8.7 -7.5 1.2 -0.7 -6.5 1.4 -1.1 1.3 -1.1 1 -1.6 1.8 -1.1 1.9 -1.8 0.5 -1.6 2.1 -2.7 1.1 -1 -0.2 -1 -1.3 -3.1 -1.8 -0.2 -1.9 -6.1 2.9 -1.8 4.4 -1.5 4 -1.3 3.2 -0.5 6.3 -0.2 1.9 1.3 1.6 0.2 2.1 -1.3 2.6 -1.1 5.2 -0.5 2.1 -1.8 1.8 -3.2 1.6 -1.9 2.1 0 1.9 -1.1 0.2 -2.3 -1.5 -2.1 -0.3 -1.5 1.1 -2.1 0 -1.5 -1.8 0 -1.8 -0.8 -0.8 -1.1 -0.2 -2.6 5.8 -5.5 0.6 -0.8 1.5 -2.9 2.9 -4.5 2.7 -3.7 2.1 -2.4 2.4 -1.8 3.1 -1.2 5.5 -1.3 3.2 0.2 4.5 -1.5 7.6 -2.1 0.5 5 2.4 6.5 0.8 5.2 -1 3.9 2.6 4.5 0.8 2.1 -0.8 2.9 2.9 1.3 0.6 0.3 3.1 11 -0.5 5.1 -0.5 10.8 0.8 5.5 0.8 3.6 1.5 7.3 0 8.1 -1.1 2.3 1.8 2 0.8 1.7 -1.9 1.8 0.3 1.3 1.3 -0.3 1.5 -1.3 2.3 -2.6 1.1 -0.6 1.6 0.6 2.3 0.2 7.9 -3.9 2.9 -2.7 1.3 -1.5 4.2 1.6 -3.4 3.6 -3.9 2.9 -7.1 5.3 -2.6 1 -5.8 1.9 -4 1.1 -1.2 -0.5 -0.2 -3.7 0.5 -2.7 -0.2 -2.1 -2.8 -1.7 -4.5 -1 -3.9 -1.1 -3.7 -1.8 z"/> 
 
    </a> 
 
    <text x="802" y="157.3"> 
 
    <tspan x="802" y="157.3">NY</tspan> 
 
    </text> 
 
    <!-- Michigan --> 
 
    <a id="MI" xlink:href="/MI/"> 
 
    <path d="m697.9 177.2 -3.2 -8.2 -2.3 -9.1 -2.4 -3.2 -2.6 -1.8 -1.6 1.1 -3.9 1.8 -1.9 5 -2.7 3.7 -1.1 0.6 -1.5 -0.6c0 0 -2.6 -1.5 -2.4 -2.1 0.2 -0.6 0.5 -5 0.5 -5l3.4 -1.3 0.8 -3.4 0.6 -2.6 2.4 -1.6 -0.3 -10 -1.6 -2.3 -1.3 -0.8 -0.8 -2.1 0.8 -0.8 1.6 0.3 0.2 -1.6 -2.4 -2.3 -1.3 -2.6 -2.6 0 -4.5 -1.5 -5.5 -3.4 -2.7 0 -0.6 0.6 -1 -0.5 -3.1 -2.3 -2.9 1.8 -2.9 2.3 0.3 3.6 1 0.3 2.1 0.5 0.5 0.8 -2.6 0.8 -2.6 0.3 -1.5 1.8 -0.3 2.1 0.3 1.6 0.3 5.5 -3.6 2.1 -0.6 -0.2 0 -4.2 1.3 -2.4 0.6 -2.4 -0.8 -0.8 -1.9 0.8 -1 4.2 -2.7 1.1 -1.8 1.9 -0.2 1 0.6 0.8 -0.6 2.6 -2.3 0.5 0 1.1 0.8 2.4 -1.1 6.1 -1.6 4 0.6 4.7 0.5 1.1 -0.8 2.4 -0.3 0.8 -0.3 2.7 3.6 6 2.9 6.5 1.5 4.8 -0.8 4.7 -1 6 -2.4 5.2 -0.3 2.7 -3.3 3.1 4.4 -0.2 21.4 -2.3 7.3 -1 0.1 1.7 6.9 -1.2 10.3 -1.5 3.9 -0.5 0.1 -0.6 0.2 -1.5 2.1 -3.7 2 -1.7 -0.2 -5.1 1.6 -1.6 1.1 -0.3 0.2 -3.6 1.5 -3 1.1 0.6 0.2 0.6 0.8 0.2 1.9 -1 -0.3 -9.5z"/> 
 
    <path d="m581.6 82.1 1.8 -2.1 2.2 -0.8 5.4 -3.9 2.3 -0.6 0.5 0.5 -5.1 5.1 -3.3 1.9 -2.1 0.9 -1.6 -1.1zm86.2 32.1 0.6 2.5 3.2 0.2 1.3 -1.2c0 0 -0.1 -1.5 -0.4 -1.6 -0.3 -0.2 -1.6 -1.9 -1.6 -1.9l-2.2 0.2 -1.6 0.2 -0.3 1.1 1 0.5zm-100.3 -3 0.7 -0.6 2.7 -0.8 3.6 -2.3 0 -1 0.6 -0.6 6 -1 2.4 -1.9 4.4 -2.1 0.2 -1.3 1.9 -2.9 1.8 -0.8 1.3 -1.8 2.3 -2.3 4.4 -2.4 4.7 -0.5 1.1 1.1 -0.3 1 -3.7 1 -1.5 3.1 -2.3 0.8 -0.5 2.4 -2.4 3.2 -0.3 2.6 0.8 0.5 1 -1.1 3.6 -2.9 1.3 1.3 2.3 0 3.2 1 1.5 1.1 1.5 3.1 2.7 2.7 3.9 -0.2 1.5 -1 1.6 1.3 1.6 0.5 1.3 -0.8 1.1 0 1.6 -1 4 -3.6 3.4 -1.1 6.6 -0.3 4.5 -1.9 2.6 -1.3 1.5 0.2 0 5.7 0.5 0.3 2.9 0.8 1.9 -0.5 6.1 -1.6 1.1 -1.1 1.5 0.5 0 7 3.2 3.1 1.3 0.6 1.3 1 -1.3 0.3 -0.8 -0.3 -3.7 -0.5 -2.1 0.6 -2.3 -0.2 -3.2 1.5 -1.8 0 -5.8 -1.3 -5.2 0.2 -1.9 2.6 -7 0.6 -2.4 0.8 -1.1 3.1 -1.3 1.1 -0.5 -0.2 -1.5 -1.6 -4.5 2.4 -0.6 0 -1.1 -1.6 -0.8 0.2 -1.9 4.4 -1 4 -3.2 7 -1.2 -1 -1.4 -1 -1.9 -10.3 -3.5 -1.4 -2.1 -2.3 -12.1 -2.7 -2.9 -1 -8.2 -2.2 -7.9 -1.1 -3.7 -5.1z"/> 
 
    </a> 
 
    <text x="642.6" y="182.6"> 
 
    <tspan x="642.6" y="182.6">MI</tspan> 
 
    </text> 
 
    <!-- Vermont --> 
 
    <a xlink:href="/VT/"> 
 
    <path d="m 838.7 147.2 0.3 -5.3 -2.9 -10.8 -0.6 -0.3 -2.9 -1.3 0.8 -2.9 -0.8 -2.1 -2.7 -4.6 1 -3.9 -0.8 -5.2 -2.4 -6.5 -0.8 -4.9 26.4 -6.7 0.3 5.5 1.9 2.7 0 4 -3.7 5.1 -2.6 1.1 -0 1.1 1.3 1.5 -0.3 8.1 -0.6 9.3 -0.2 5.6 1 1.3 -0.2 4.6 -0.5 1.7 1 0.7 -7.4 1.5 -4.5 0.7 z" id="VT"/> 
 
    <rect rx="5.2" ry="5" y="39.2" x="722.8" height="30" width="55"/> 
 
    <path d="m 838.4 96.9 0 -15.6 -88.1 0 0 -12.1" class="connector"/> 
 
    </a> 
 
    <text x="738" y="61.6"> 
 
    <tspan x="738" y="61.6">VT</tspan> 
 
    </text> 
 
    <!-- New Hampshire --> 
 
    <a xlink:href="/NH/"> 
 
    <path d="m 875 135.5 0.9 -1.1 1.1 -3.3 -2.5 -0.9 -0.5 -3.1 -3.9 -1.1 -0.3 -2.7 -7.3 -23.4 -4.6 -14.5 -0.9 -0 -0.6 1.6 -0.6 -0.5 -1 -1 -1.5 1.9 -0 5 0.3 5.7 1.9 2.7 0 4 -3.7 5.1 -2.6 1.1 0 1.1 1.1 1.8 0 8.6 -0.8 9.2 -0.2 4.8 1 1.3 -0.2 4.5 -0.5 1.8 1 0.7 16.8 -4.4 2.2 -0.6 1.8 -2.8 3.6 -1.6 z" id="NH"/> 
 
    <rect rx="5.2" ry="5" y="39.2" x="788.2" height="30" width="55"/> 
 
    <path d="m 855.5 86.9 0 -32.7 -12.3 0" class="connector"/> 
 
    </a> 
 
    <text x="802.1" y="61.6"> 
 
    <tspan x="802.1" y="61.6">NH</tspan> 
 
    </text> 
 
</svg>

来源

2015-03-19 15:07:55

+0

步骤我感动了''里面的文字标签的答案的答案并将连接器移出它。现在它按照我想要的方式工作，谢谢。 – 2015-03-19 17:06:38

相关问题

 相关问题