如何使多边形组中的外线变得更大胆

时间:2018-02-02 06:31:32

标签: javascript svg

我使用svg绘制一组多边形。一组由5个多边形组成。我不知道如何使外线在点击时更加大胆enter image description here

这是我的代码:

<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>

非常感谢

0 个答案:

没有答案