我使用svg绘制一组多边形。一组由5个多边形组成。我不知道如何使外线在点击时更加大胆。
这是我的代码:
<div id="svgselect" style="width: 610px; height: 230px;">
<!-- background-color:red -->
<svg version="1.1" height="100%" width="100%">
<g transform="scale(1.5)" id="gmain">
<g id="P17" transform="translate(25,0)">
<polygon points="5,5 15,5 15,15 5,15" fill="white" stroke="navy" stroke-width="0.5" id="C" opacity="1"></polygon>
<polygon points="0,0 20,0 15,5 5,5" fill="white" stroke="navy" stroke-width="0.5" id="T" opacity="1"></polygon>
<polygon points="5,15 15,15 20,20 0,20" fill="white" stroke="navy" stroke-width="0.5" id="B" opacity="1" class="B17"></polygon>
<polygon points="15,5 20,0 20,20 15,15" fill="white" stroke="navy" stroke-width="0.5" id="R" opacity="1"></polygon>
<polygon points="0,0 5,5 5,15 0,20" fill="white" stroke="navy" stroke-width="0.5" id="L" opacity="1"></polygon>
<text x="6" y="30" stroke="navy" fill="navy" stroke-width="0.1" style="font-size: 6pt;font-weight:normal">17</text>
</g>
<g id="P16" transform="translate(50,0)">
<polygon points="5,5 15,5 15,15 5,15" fill="white" stroke="navy" stroke-width="0.5" id="C" opacity="1"></polygon>
<polygon points="0,0 20,0 15,5 5,5" fill="white" stroke="navy" stroke-width="0.5" id="T" opacity="1"></polygon>
<polygon points="5,15 15,15 20,20 0,20" fill="white" stroke="navy" stroke-width="0.5" id="B" opacity="1" class="B16"></polygon>
<polygon points="15,5 20,0 20,20 15,15" fill="white" stroke="navy" stroke-width="0.5" id="R" opacity="1"></polygon>
<polygon points="0,0 5,5 5,15 0,20" fill="white" stroke="navy" stroke-width="0.5" id="L" opacity="1"></polygon>
<text x="6" y="30" stroke="navy" fill="navy" stroke-width="0.1" style="font-size: 6pt;font-weight:normal">16</text>
</g>
<g id="P15" transform="translate(75,0)">
<polygon points="5,5 15,5 15,15 5,15" fill="white" stroke="navy" stroke-width="0.5" id="C" opacity="1"></polygon>
<polygon points="0,0 20,0 15,5 5,5" fill="white" stroke="navy" stroke-width="0.5" id="T" opacity="1"></polygon>
<polygon points="5,15 15,15 20,20 0,20" fill="white" stroke="navy" stroke-width="0.5" id="B" opacity="1" class="B15"></polygon>
<polygon points="15,5 20,0 20,20 15,15" fill="white" stroke="navy" stroke-width="0.5" id="R" opacity="1"></polygon>
<polygon points="0,0 5,5 5,15 0,20" fill="white" stroke="navy" stroke-width="0.5" id="L" opacity="1"></polygon>
<text x="6" y="30" stroke="navy" fill="navy" stroke-width="0.1" style="font-size: 6pt;font-weight:normal">15</text>
</g>
</g>
</svg>
</div>
非常感谢