javascript - 内联 SVG 元素不适用于 Div

Question

我有这个片段。我的最终游戏是使用更大的六边形作为生成的六边形的容器。我正在使用内联 svg 元素，但它似乎并没有像我希望的那样将掩码应用于具有内部类的 div。我是否实现错误或遗漏了什么？

如果我不得不猜测是因为我的六边形坐标大于 1 这会破坏 boundingBox 吗？

$(document).ready(function() {
    var wrapper = document.getElementsByClassName('inner')[0];
    
    for(var i = 0; i <= 250; i++) {
      var hex = document.createElement('div');
      
      var colors = ['red-hex', 'blue-hex','yellow-hex'];
      var hexColor = Math.floor(Math.random() * colors.length);
      
      hex.className = 'hexagon ';
      hex.className += colors[hexColor];
      hex.innerHTML = '<i class="mdi mdi-hexagon" aria-hidden="true"></i>';
    
      var size = (Math.random()* (200-100)) + 100;
      hex.style.fontSize = size + 'px';
      
      var posx = (Math.random() * wrapper.offsetWidth - size).toFixed();
      var posy = (Math.random() * wrapper.offsetHeight - size).toFixed();
      
      hex.style.top = posy+'px';
      hex.style.left = posx+'px';
      
      wrapper.appendChild(hex);
    } 
});

.hexagon_wrapper {
  position: relative;
  width: 1000px;
  height: 1000px;
  margin: 0 auto;
}

.svg-defs {
  position: absolute;
  width: 0;
  height: 0;
 }

.inner {
  position: relative;
  width: 100%;
  height: 100%;
  -webkit-clip-path: url("#clipping");
          clip-path: url("#clipping");
}

.hexagon {
  position: absolute;
  /* mix-blend-mode: color-dodge; looks wicked */
  mix-blend-mode: saturation;
  padding: 10px;
}

.red-hex {
  color: #fe412b;
  -webkit-animation:fade-in 6s infinite;
}

.blue-hex {
  color: #39b1e3;
  -webkit-animation:fade-in 5s infinite;
}

.yellow-hex {
  color: #fcfe41; 
  -webkit-animation:fade-in 4s infinite;
}

@-webkit-keyframes fade-in{
  0%, 100% {
    opacity: 0.9;
  }
  50% {
    opacity: 0.5;
  }
}

<link href="https://cdn.materialdesignicons.com/1.8.36/css/materialdesignicons.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="hexagon_wrapper">
  <div class="inner">
  </div>
  <svg class="svg-defs">
    <defs>
      <clipPath id="clipping" clipPathUnits ="objectBoundingBox">
        <polygon points="50 1 95 25 95 75 50 99 5 75 5 25" />
      </clipPath>
    </defs>
  </svg>
</div>

Answer 1

我已经重写了您的多边形以适应 1x1 的 viewBox，然后它就可以工作了。我还没有弄清楚这种行为的确切原因。

$(document).ready(function() {
    var wrapper = document.getElementsByClassName('inner')[0];
    
    for(var i = 0; i <= 250; i++) {
      var hex = document.createElement('div');
      
      var colors = ['red-hex', 'blue-hex','yellow-hex'];
      var hexColor = Math.floor(Math.random() * colors.length);
      
      hex.className = 'hexagon ';
      hex.className += colors[hexColor];
      hex.innerHTML = '<i class="mdi mdi-hexagon" aria-hidden="true"></i>';
    
      var size = (Math.random()* (200-100)) + 100;
      hex.style.fontSize = size + 'px';
      
      var posx = (Math.random() * wrapper.offsetWidth - size).toFixed();
      var posy = (Math.random() * wrapper.offsetHeight - size).toFixed();
      
      hex.style.top = posy+'px';
      hex.style.left = posx+'px';
      
      wrapper.appendChild(hex);
    } 
});

.hexagon_wrapper {
  position: relative;
  width: 1000px;
  height: 1000px;
  margin: 0 auto;
}

.svg-defs {
  position: absolute;
  width: 0;
  height: 0;
 }

.inner {
  position: relative;
  width: 100%;
  height: 100%;
  -webkit-clip-path: url("#clipping");
          clip-path: url("#clipping");
}

.hexagon {
  position: absolute;
  /* mix-blend-mode: color-dodge; looks wicked */
  mix-blend-mode: saturation;
  padding: 10px;
}

.red-hex {
  color: #fe412b;
  -webkit-animation:fade-in 6s infinite;
}

.blue-hex {
  color: #39b1e3;
  -webkit-animation:fade-in 5s infinite;
}

.yellow-hex {
  color: #fcfe41; 
  -webkit-animation:fade-in 4s infinite;
}

@-webkit-keyframes fade-in{
  0%, 100% {
    opacity: 0.9;
  }
  50% {
    opacity: 0.5;
  }
}

<link href="https://cdn.materialdesignicons.com/1.8.36/css/materialdesignicons.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="hexagon_wrapper">
  <div class="inner">
  </div>
  <svg class="svg-defs">
    <defs>
      <clipPath id="clipping" clipPathUnits ="objectBoundingBox">
                <polygon points=".5 .01, 0.95 .25, .95 .75, .50 .99, .05 .75, .05 .25" />
      </clipPath>
    </defs>
  </svg>
</div>