使用JavaScript填充SVG内部的模式

Question

I have a svg element a square consist of five element polygon inside. When its click I want to make its outer line get bolder and the stripes line appear (inside the bolder line). I've try to make it using javascript. But only the bold outer line can appear and the stripes line can't appear. Here is the picture I aim to achieve

And here's my code

// Find the group that contains the polygon that was clicked on
var group = evt.target.parentNode;
// Get the bounding box of the group
var bbox = group.getBBox();
var svgns = "http://www.w3.org/2000/svg";
var shape = document.createElementNS(svgns, "polygon");
var pattern = document.createElementNS(svgns, "pattern");
shape.setAttribute("points", "0,0, 0,20, 20,20, 20,0");
shape.setAttributeNS(null, "fill", "none");
shape.setAttributeNS(null, "stroke", "black");
shape.setAttributeNS(null, "stroke-width", 2.5);
var xPos = bbox.x ;
var yPos = bbox.y ;
shape.setAttribute("transform", "translate(" + xPos + "," + yPos + ")");
//group.appendChild(shape);
pattern.setAttribute('id','pattern');
pattern.setAttribute('width','8');
pattern.setAttribute('height','10');
pattern.setAttribute('patternUnits', 'userSpaceOnUse');
pattern.setAttribute('patternTransform', 'rotate(0 90 90)');
pattern.setAttribute(null, "stroke", "black");
pattern.setAttribute(null, "stroke-width", 1);
pattern.setAttribute("transform", "translate(" + xPos + "," + yPos + ")");
//shape.append(pattern);
shape.setAttribute('fill', 'url(pattern)');
group.append(shape).append(pattern);

https://jsfiddle.net/nanadia/kzy722b9/3/

Answer 1

Try to define the pattern within the svg element and change the visibility upon clicking (sample code toget you started):

        <div id="svgselect" style="width: 610px; height: 230px;">
          <!-- background-color:red -->
          <svg version="1.1" height="100%" width="100%">
            <defs>
                <pattern id="pat" x="0" y="0" width="3" height="20" patternUnits="userSpaceOnUse" transform="scale(1.5) translate(35,0)">
                    <rect x="0" y="0" width="0.5" height="20"  stroke="black" stroke-width="1" />
                </pattern>
            </defs>
            <g transform="scale(1.5)" id="gmain">
              <g id="P17" transform="translate(25,0)">
                <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>
                <polygon class="line" points="0,0  20,0  15,5  5,5" fill="white" stroke="navy" stroke-width="0.5" id="T" opacity="1"></polygon>
                <polygon class="line B17" points="5,15   15,15   20,20   0,20" fill="white" stroke="navy" stroke-width="0.5" id="B" opacity="1"></polygon>
                <polygon class="line" points="15,5   20,0  20,20   15,15" fill="white" stroke="navy" stroke-width="0.5" id="R" opacity="1"></polygon>
                <polygon class="line" points="0,0  5,5   5,15  0,20" fill="white" stroke="navy" stroke-width="0.5" id="L" opacity="1"></polygon>
                <polygon class="line" points="0,0  0,20  20,20 20,0" fill="url(#pat)" stroke="black" stroke-width="2.5" id="inv" opacity="1" visibility="hidden" >

                </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 class="line" points="5,5  15,5  15,15   5,15" fill="white" stroke="navy" stroke-width="0.5" id="C16" opacity="1"></polygon>
                <polygon class="line" points="0,0  20,0  15,5  5,5" fill="white" stroke="navy" stroke-width="0.5" id="T16" opacity="1"></polygon>
                <polygon class="line B16" points="5,15   15,15   20,20   0,20" fill="white" stroke="navy" stroke-width="0.5" id="B16" opacity="1"></polygon>
                <polygon class="line" points="15,5   20,0  20,20   15,15" fill="white" stroke="navy" stroke-width="0.5" id="R16" opacity="1"></polygon>
                <polygon class="line" points="0,0  5,5   5,15  0,20" fill="white" stroke="navy" stroke-width="0.5" id="L16" 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 class="line" points="5,5  15,5  15,15   5,15" fill="white" stroke="navy" stroke-width="0.5" id="C15" opacity="1"></polygon>
                <polygon class="line" points="0,0  20,0  15,5  5,5" fill="white" stroke="navy" stroke-width="0.5" id="T15" opacity="1"></polygon>
                <polygon class="line B15" points="5,15   15,15   20,20   0,20" fill="white" stroke="navy" stroke-width="0.5" id="B15" opacity="1"></polygon>
                <polygon class="line" points="15,5   20,0  20,20   15,15" fill="white" stroke="navy" stroke-width="0.5" id="R15" opacity="1"></polygon>
                <polygon class="line" points="0,0  5,5   5,15  0,20" fill="white" stroke="navy" stroke-width="0.5" id="L15" 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>

        <script>
$('polygon').click(function(evt) {
    $("#inv").attr("visibility", "visible");
});
        </script>

Live demo ( first square only )