Question

我有一个svg元素，一个由五个元素多边形组成的正方形。当它的点击我想让它的外线变得更大胆并出现条纹线（在更大胆的线内）。我试着用javascript来制作它。但只有粗体外线才会出现，并且条纹线不会出现。这是我想要实现的图片

这是我的代码

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

尝试在svg元素中定义模式，并在单击时更改可见性（示例代码让您开始）：

        <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（仅限第一方）

使用javascript在svg内填充模式

1 个答案: