Question

我有一组多边形由其他多边形组成。我想让多边形线在点击时变得更大胆。它可以吗？我该怎么做呢？

这是我的代码

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

Answer 1

定位您的特定选择器并更改笔触宽度。我打算给你一个例子：

var select = document.querySelector('polygon');
select.addEventListener('click',function(){
  select.setAttribute("stroke-width", "3");
});

Answer 2

将一个类添加到poly ex：

<polygon class="line" points="5,5  15,5  15,15   5,15" fill="white" stroke="navy" stroke-width="0.5" id="C" opacity="1"></polygon>

然后添加此js代码

$('.line').click(function () {
    $(this).attr("stroke-width", parseFloat($(this).attr("stroke-width"))+0.5 );
});

然后他们会增加每次点击

小提琴：http://jsfiddle.net/qgxhgs44/

*注意需要添加jquery

如何使svg线在点击时变得更大胆

2 个答案: