在 CSS 中为 3d 平面上的子元素设置正确的透视图

Question

我有一个倾斜 45 度角的 SVG 六角网格。在单个六边形上，我想放置看起来相对于网格平面直立的图像（由红色矩形表示）。图像/矩形不一定必须是完整的 90 度，但我很难让它们有任何与平面略有不同的视角。

有没有办法取消设置子元素的透视图或以某种方式重新处理 CSS 转换以使其看起来正确？

代码

.display {
    animation: displayFlicker 100ms cubic-bezier(.37, 0, .41, 1.74) 100ms 1 normal forwards;
    -webkit-animation: displayFlicker 100ms cubic-bezier(.37, 0, .41, 1.74) 100ms 1 normal forwards;
    background: #000;
    display: block;
    border-left: 0.25rem solid #000;
    border-right: 0.25rem solid #000;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    height: 480px;
    overflow: hidden;
    width: 1096px;
}
#hexGrid {
    box-sizing: border-box;
    -moz-box-sizing: border-box;    
    display: block;
    height: 100%;
    -webkit-transform: perspective(44vw) rotateX(45deg) scale3d(1.6, 1.6, 1.6); 
    -moz-transform: perspective(44vw) rotateX(45deg) scale3d(1.6, 1.6, 1.6);    
    -ms-transform: perspective(44vw) rotateX(45deg) scale3d(1.6, 1.6, 1.6); 
    -o-transform: perspective(44vw) rotateX(45deg) scale3d(1.6, 1.6, 1.6);  
    transform: perspective(44vw) rotateX(45deg) scale3d(1.6, 1.6, 1.6);
    transform-style: preserve-3d;
    width: 100%;
}
.hexContainer {
    outline: none;
    transform-style: preserve-3d;
}
.hex {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    display: inline-block;
    height: 4.4vmin;
    opacity: 1;
    outline: none;
    position: relative;
    stroke: #0CF;
    stroke-width: 0.0625rem;
    transform: scale3d(1, 1, 1);
    transition: all linear 300ms;
    width: 8vmin;
}
.hex.open {
    fill: rgba(0, 204, 255, 0.3);
}
.hex.blocked {
    fill: url(#blockedHexPattern);
    fill-opacity: 0.3;
}
.hexContainer:focus .open, .hexContainer:hover .open {
    cursor: pointer;
    fill: rgba(0, 204, 255, 0.8);
    outline: none;
}
.hexContainer:focus .blocked, .hexContainer:hover .blocked {
    cursor: pointer;
    fill: url(#blockedHexPattern);
    fill-opacity: 1;
    outline: none;
}
.hexContainer:focus .occupied, .hexContainer:hover .occupied {
    cursor: pointer;
    fill: rgba(50, 50, 50, 0.8);
    outline: none;
}
.hexContainer:focus .open, .hexContainer:focus .open.unblock {
    transform-origin: 50% 0%;
}
.hexContainer:focus .blocked {
    opacity: 1; 
    transform-origin: 50% 0%;
}
.hexContainer.active .open {
    fill: rgba(0, 204, 255, 0.8);
    opacity: 1; 
}
#blockedHexPattern line {
    stroke: #0CF;
    stroke-width: 0.0625rem;
}
#hexGrid .rect {
    transform: rotateX(0deg);   
}

<div id="stationMap" class="display">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="55 -30 360 360" id="hexGrid">
    <defs>
        <pattern x="0" y="0" height="10" width="10" patternUnits="userSpaceOnUse" id="blockedHexPattern">
            <line x1="0" y1="10" x2="10" y2="0"></line>
        </pattern>
    </defs>
    <a id="hex0-0" class="hexContainer">
        <polygon class="hex open" points="81.96152422706632,45 55.98076211353316,60 30,45 30.000000000000004,14.999999999999996 55.98076211353315,0 81.96152422706632,14.999999999999986"></polygon>
    </a>
    <a id="hex0-2" class="hexContainer">
        <polygon class="hex blocked" points="185.88457268119896,45 159.9038105676658,60 133.92304845413264,45 133.92304845413264,14.999999999999996 159.9038105676658,0 185.88457268119896,14.999999999999986" fill="url(#blockedHexPattern)"></polygon>
    </a>
    <a id="hex0-6" class="hexContainer">
        <polygon class="hex blocked" points="393.7306695894642,45 367.749907475931,60 341.76914536239786,45 341.76914536239786,14.999999999999996 367.749907475931,0 393.7306695894642,14.999999999999986" fill="url(#blockedHexPattern)"></polygon>
    </a>
    <a id="hex0-7" class="hexContainer">
        <polygon class="hex blocked" points="445.6921938165305,45 419.71143170299734,60 393.7306695894642,45 393.7306695894642,14.999999999999996 419.71143170299734,0 445.6921938165305,14.999999999999986" fill="url(#blockedHexPattern)"></polygon>
    </a>
    <a id="hex1-0" class="hexContainer">
        <polygon class="hex open" points="55.98076211353316,90 30.000000000000004,105 4.01923788646684,90 4.019237886466843,60 29.999999999999993,45 55.98076211353315,59.999999999999986"></polygon>
        <rect class="rect" fill="red" x="5" y="67.5" width="50" height="40"/>
    </a>
    <a id="hex1-3" class="hexContainer">
        <polygon class="hex blocked" points="211.8653347947321,90 185.88457268119893,105 159.90381056766577,90 159.90381056766577,60 185.88457268119893,45 211.8653347947321,59.999999999999986" fill="url(#blockedHexPattern)"></polygon>
    </a>
    <a id="hex1-4" class="hexContainer">
        <polygon class="hex open" points="263.82685902179844,90 237.84609690826525,105 211.8653347947321,90 211.8653347947321,60 237.84609690826525,45 263.8268590217984,59.999999999999986"></polygon>
    </a>
    <a id="hex1-5" class="hexContainer">
        <polygon class="hex open" points="315.7883832488647,90 289.80762113533154,105 263.8268590217984,90 263.8268590217984,60 289.80762113533154,45 315.7883832488647,59.999999999999986"></polygon>
    </a>
    <a id="hex1-6" class="hexContainer">
        <polygon class="hex open" points="367.749907475931,90 341.76914536239786,105 315.7883832488647,90 315.7883832488647,60 341.76914536239786,45 367.749907475931,59.999999999999986"></polygon>
    </a>
    <a id="hex1-7" class="hexContainer">
        <polygon class="hex open" points="419.71143170299734,90 393.7306695894642,105 367.749907475931,90 367.749907475931,60 393.7306695894642,45 419.71143170299734,59.999999999999986"></polygon>
        <rect class="rect" fill="red" x="369" y="67.5" width="50" height="40"/>
    </a>
    <a id="hex2-0" class="hexContainer">
        <polygon class="hex open" points="81.96152422706632,134.99999999999997 55.98076211353316,150 30,134.99999999999997 30.000000000000004,104.99999999999999 55.98076211353315,89.99999999999999 81.96152422706632,104.99999999999997"></polygon>
    </a>
    <a id="hex2-2" class="hexContainer">
        <polygon class="hex blocked" points="185.88457268119896,134.99999999999997 159.9038105676658,150 133.92304845413264,134.99999999999997 133.92304845413264,104.99999999999999 159.9038105676658,89.99999999999999 185.88457268119896,104.99999999999997" fill="url(#blockedHexPattern)"></polygon>
    </a>
    <a id="hex2-3" class="hexContainer">
        <polygon class="hex open" points="237.84609690826525,134.99999999999997 211.8653347947321,150 185.88457268119893,134.99999999999997 185.88457268119893,104.99999999999999 211.8653347947321,89.99999999999999 237.84609690826525,104.99999999999997"></polygon>
    </a>
    <a id="hex2-4" class="hexContainer">
        <polygon class="hex open" points="289.80762113533154,134.99999999999997 263.8268590217984,150 237.84609690826522,134.99999999999997 237.84609690826522,104.99999999999999 263.8268590217984,89.99999999999999 289.80762113533154,104.99999999999997"></polygon>
    </a>
    <a id="hex2-5" class="hexContainer">
        <polygon class="hex open" points="341.76914536239786,134.99999999999997 315.7883832488647,150 289.80762113533154,134.99999999999997 289.80762113533154,104.99999999999999 315.7883832488647,89.99999999999999 341.76914536239786,104.99999999999997"></polygon>
    </a>
    <a id="hex2-6" class="hexContainer">
        <polygon class="hex open" points="393.7306695894642,134.99999999999997 367.749907475931,150 341.76914536239786,134.99999999999997 341.76914536239786,104.99999999999999 367.749907475931,89.99999999999999 393.7306695894642,104.99999999999997"></polygon>
    </a>
    <a id="hex2-7" class="hexContainer">
        <polygon class="hex open" points="445.6921938165305,134.99999999999997 419.71143170299734,150 393.7306695894642,134.99999999999997 393.7306695894642,104.99999999999999 419.71143170299734,89.99999999999999 445.6921938165305,104.99999999999997"></polygon>
    </a>
    <a id="hex3-0" class="hexContainer">
        <polygon class="hex open" points="55.98076211353316,179.99999999999997 30.000000000000004,194.99999999999997 4.01923788646684,179.99999999999997 4.019237886466843,149.99999999999997 29.999999999999993,134.99999999999997 55.98076211353315,149.99999999999994"></polygon>
    </a>
    <a id="hex3-3" class="hexContainer">
        <polygon class="hex blocked" points="211.8653347947321,179.99999999999997 185.88457268119893,194.99999999999997 159.90381056766577,179.99999999999997 159.90381056766577,149.99999999999997 185.88457268119893,134.99999999999997 211.8653347947321,149.99999999999994" fill="url(#blockedHexPattern)"></polygon>
    </a>
    <a id="hex3-5" class="hexContainer">
        <polygon class="hex blocked" points="315.7883832488647,179.99999999999997 289.80762113533154,194.99999999999997 263.8268590217984,179.99999999999997 263.8268590217984,149.99999999999997 289.80762113533154,134.99999999999997 315.7883832488647,149.99999999999994" fill="url(#blockedHexPattern)"></polygon>
    </a>
    <a id="hex3-7" class="hexContainer">
        <polygon class="hex blocked" points="419.71143170299734,179.99999999999997 393.7306695894642,194.99999999999997 367.749907475931,179.99999999999997 367.749907475931,149.99999999999997 393.7306695894642,134.99999999999997 419.71143170299734,149.99999999999994" fill="url(#blockedHexPattern)"></polygon>
    </a>
    <a id="hex4-0" class="hexContainer">
        <polygon class="hex open" points="81.96152422706632,224.99999999999997 55.98076211353316,239.99999999999997 30,224.99999999999997 30.000000000000004,194.99999999999997 55.98076211353315,179.99999999999997 81.96152422706632,194.99999999999994"></polygon>
    </a>
    <a id="hex4-1" class="hexContainer">
        <polygon class="hex blocked" points="133.92304845413264,224.99999999999997 107.94228634059948,239.99999999999997 81.96152422706632,224.99999999999997 81.96152422706632,194.99999999999997 107.94228634059948,179.99999999999997 133.92304845413264,194.99999999999994" fill="url(#blockedHexPattern)"></polygon>
    </a>
    <a id="hex4-2" class="hexContainer">
        <polygon class="hex blocked" points="185.88457268119896,224.99999999999997 159.9038105676658,239.99999999999997 133.92304845413264,224.99999999999997 133.92304845413264,194.99999999999997 159.9038105676658,179.99999999999997 185.88457268119896,194.99999999999994" fill="url(#blockedHexPattern)"></polygon>
    </a>
    <a id="hex4-3" class="hexContainer">
        <polygon class="hex blocked" points="237.84609690826525,224.99999999999997 211.8653347947321,239.99999999999997 185.88457268119893,224.99999999999997 185.88457268119893,194.99999999999997 211.8653347947321,179.99999999999997 237.84609690826525,194.99999999999994" fill="url(#blockedHexPattern)"></polygon>
    </a>
    <a id="hex4-4" class="hexContainer">
        <polygon class="hex open" points="289.80762113533154,224.99999999999997 263.8268590217984,239.99999999999997 237.84609690826522,224.99999999999997 237.84609690826522,194.99999999999997 263.8268590217984,179.99999999999997 289.80762113533154,194.99999999999994"></polygon>
    </a>
    <a id="hex4-5" class="hexContainer">
        <polygon class="hex open" points="341.76914536239786,224.99999999999997 315.7883832488647,239.99999999999997 289.80762113533154,224.99999999999997 289.80762113533154,194.99999999999997 315.7883832488647,179.99999999999997 341.76914536239786,194.99999999999994"></polygon>
    </a>
    <a id="hex4-6" class="hexContainer">
        <polygon class="hex open" points="393.7306695894642,224.99999999999997 367.749907475931,239.99999999999997 341.76914536239786,224.99999999999997 341.76914536239786,194.99999999999997 367.749907475931,179.99999999999997 393.7306695894642,194.99999999999994"></polygon>
    </a>
</svg>
</div>

Answer 1

SVG 还不支持 3D 变换；即使您可以转换您的 .hexGrid svg 元素（它仍在 html 上下文中，因此接受 3D 转换），它的内容将平放在其中，没有 transform-style 可以扭转这种行为。

最好的办法是将每个六边形都作为自己的 SVG 元素，这样它们就可以分别进行 3D 转换。比如：

<div class="hexGrid" style="{3d transform}">
    <svg class="hex" style="{reversed 3d transform}">
        <polygon />
        <rect />
    </svg>
    <svg class="hex">
        ...
    </svg>
</div>

您还将 HTML 标签与 SVG 标签混合在一起：<a> 在 SVG 中不存在。您可以在任何元素上使用xlink:href 属性。

Answer 2

由于无法在 svg 元素上正确处理 3d 变换，我建议对六边形网格采用不同的方法。可以使用纯 html 和 css 来实现，如以下问题所示：Responsive grid of hexagons。

这允许使用 transform-style property 对子元素进行 3d 变换。

适应您的用例，它可能看起来像这样：

DEMO

body{
  background:rgb(123, 158, 158);
  perspective:500px;
}
#categories{
  width:70%;
  margin:0 auto;
  transform:rotateX(45deg);
  transform-style: preserve-3d;
}
#categories:after{
  content:"";
  display:block;
  clear:both;
}
#categories li{
  position:relative;
  list-style-type:none;
  width:17.364%; /* = (100-4.5) / 5.5 */
  padding-bottom: 20.05%; /* =  width /0.866 */
  float:left;
  overflow:hidden;
  visibility:hidden;  
  transform: rotate(-60deg) skewY(30deg);
}

#categories li:nth-child(10n+6), #categories li:nth-child(10n+7), #categories li:nth-child(10n+8), #categories li:nth-child(10n+9), #categories li:nth-child(10n+10) {
    margin-top: -4.2%;
    margin-bottom: -4.2%;
    transform: translateX(50%) rotate(-60deg) skewY(30deg);
  }
#categories li:nth-child(10n+6){
    margin-left:0.5%;
  }
  #categories li:nth-child(5n+2) {
    margin-left:1%;
    margin-right:1%;
  }
  #categories li:nth-child(5n+3),#categories li:nth-child(5n+4){
    margin-right:1%;
  }

#categories li div{
  position:absolute;
  visibility:visible;
  width:100%; height:100%;
  text-align:center;
  color:#fff;
  overflow:hidden;  
  transform: skewY(-30deg) rotate(60deg);
  background-color:rgba(0,0,0,.2);
  transition:background-color .3s;
  border-left:2px solid #000;  
  border-right:2px solid #000;
  box-sizing:border-box;
  -webkit-backface-visibility:hidden;
}
#categories li div:hover, #categories .up:hover span:after{
  background-color:rgba(0,0,0,.5);
}
#categories li div:before, #categories li div:after{
  content:'';
  position:absolute;
  width:100%;height:49.6%;
  left:-2px;top:25.5%;
  
  border-left:2px solid #000;
  border-right:2px solid #000;
  transform:rotate(60deg);
  visibility:visible;
}
#categories li div:before{
    transform:rotate(-60deg);
}

#categories li img{
  display:block;
  left:-100%; right:-100%;
  width: auto; height:100%;
  margin:0 auto;
  visibility:visible;
}
#categories .up, #categories .up div{
  transform-style:preserve-3d;
  overflow:visible;
  visibility:hidden;
  background-color:transparent;
}
#categories .up span{
  display:block;
  width:100%;height:100%;
  position:absolute;
  top:0; left:0;
  overflow:hidden;
}
#categories .up span:after{
  content:'';
  position:absolute;
  left:0;top:0;
  width:100%;height:100%;
  border-left:2px solid #000;
  border-right:2px solid #000;
  box-sizing:border-box;
  background-color:rgba(0,0,0,.2);
  transform: skewY(-30deg) rotate(60deg);
  transition:background-color .3s;
  visibility:visible;
}

#categories .up img{
  width:100%; height:auto;
  position:absolute;
  transform-origin: 50% 100%;
  transform: rotateX(-45deg);
  z-index:1;
}

<ul id="categories" class="clr">
	  <li><div></div></li>
  <li class="up"><span></span><div><img src="https://farm9.staticflickr.com/8461/8048823381_0fbc2d8efb.jpg" alt=""/></div></li>
  <li><div></div></li>  
  <li><div></div></li>
  <li class="up"><span></span><div><img src="https://farm7.staticflickr.com/6217/6216951796_e50778255c.jpg" alt=""/></div></li>
  <li class="pusher"></li>
  <li class="pusher"></li>
  <li class="pusher"></li>
  <li><div></div></li>
  <li class="pusher"></li>
  <li><div></div></li>
  <li><div></div></li>
  <li><div></div></li>
  <li class="pusher"></li>
  <li><div></div></li>
  <li class="up"><span></span><div><img src="https://farm5.staticflickr.com/4144/5053682635_b348b24698.jpg" alt=""/></div></li>
  <li class="pusher"></li>
  <li><div></div></li>
  <li><div></div></li>
</ul>

这个六边形网格可以适应几个用例（每行六边形的数量，六边形对齐......）这个集合中的更多例子：Responsive grids of hexagons

Answer 3

由于在 SVGElements 上处理 3d 变换是一个问题，因此解决方案可能是创建另一个重叠元素来添加变换后的元素；

此解决方案中最难的事情是找到最佳渲染的值；

除了删除#hexGridtransform 属性（CSS）中的透视图之外，标记应该与原始问题中的相同，所有工作都是通过JS完成的。

//function for checking transform property in css
function checkCSS(selector,prop){
    var sel;
    [].slice.call(document.styleSheets).forEach(function(x){
        sel= [].slice.call(x.rules).filter(function(rule){
            return rule.selectorText=='#hexGrid';
        })
        return sel
    })
    return sel[sel.length-1].style[prop]
    
}
//store transform property
var storeTrans = checkCSS('#hexGrid','transform');

//straighten svg
var hexGrid = document.getElementById('hexGrid');
hexGrid.style.transform = 'rotateX(0)';

//get the position/dimensions for perfectly tilted red squares
var rects=document.querySelectorAll('rect');
var coorArray = [].slice.call(rects).map(function(x){return x.getBoundingClientRect()})



var stationMap = document.getElementById('stationMap');
//create element for creating an layer and append
var container = document.createElement('div');
container.className='container';
container.style.perspective='33vW';//reduced for simulating foreground
container.style.height=container.style.width =  '100%';
container.style.transform='translateY(-100%) rotateX(45deg) scale(1.6)';
stationMap.appendChild(container);

//create perfectly tilted red squares
coorArray.forEach(function(x){
   
var el = document.createElement('div')
el.style.position='absolute';
el.style.top= x.top+'px';
el.style.left=x.left+'px';
el.style.width= x.width+'px';
el.style.height= x.height+'px';
el.style.background= 'tomato';
el.style.transform='perspective(12vw) rotateX(130deg) translate3d(-15%, 50%,0)';

container.appendChild(el)
})



//set prosperctive and transform-style on common parent node
stationMap.style.transformStyle='preserve-3d';
stationMap.style.perspective='44vw';
//set transform value back and rip out old rect
hexGrid.style.transform = storeTrans;
Array.prototype.slice.call(rects).forEach(function(n){
    n.parentNode.removeChild(n)
})

.display {
    animation: displayFlicker 100ms cubic-bezier(.37, 0, .41, 1.74) 100ms 1 normal forwards;
    -webkit-animation: displayFlicker 100ms cubic-bezier(.37, 0, .41, 1.74) 100ms 1 normal forwards;
    background: #000;
    display: block;
    border-left: 0.25rem solid #000;
    border-right: 0.25rem solid #000;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    height: 480px;
    overflow: hidden;
    width: 1096px;
}
#hexGrid {
    box-sizing: border-box;
    -moz-box-sizing: border-box;    
    display: block;
    height: 100%;
    -webkit-transform:  rotateX(45deg) scale3d(1.6, 1.6, 1.6); /*add perspective to parent*/
    -moz-transform:  rotateX(45deg) scale3d(1.6, 1.6, 1.6);    
    -ms-transform: rotateX(45deg) scale3d(1.6, 1.6, 1.6); 
    -o-transform:rotateX(45deg) scale3d(1.6, 1.6, 1.6);  
    transform:  rotateX(45deg) scale3d(1.6, 1.6, 1.6);
    transform-style: preserve-3d;
    width: 100%;
}
.hexContainer {
    outline: none;
    transform-style: preserve-3d;
}
.hex {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    display: inline-block;
    height: 4.4vmin;
    opacity: 1;
    outline: none;
    position: relative;
    stroke: #0CF;
    stroke-width: 0.0625rem;
    transform: scale3d(1, 1, 1);
    transition: all linear 300ms;
    width: 8vmin;
}
.hex.open {
    fill: rgba(0, 204, 255, 0.3);
}
.hex.blocked {
    fill: url(#blockedHexPattern);
    fill-opacity: 0.3;
}
.hexContainer:focus .open, .hexContainer:hover .open {
    cursor: pointer;
    fill: rgba(0, 204, 255, 0.8);
    outline: none;
}
.hexContainer:focus .blocked, .hexContainer:hover .blocked {
    cursor: pointer;
    fill: url(#blockedHexPattern);
    fill-opacity: 1;
    outline: none;
}
.hexContainer:focus .occupied, .hexContainer:hover .occupied {
    cursor: pointer;
    fill: rgba(50, 50, 50, 0.8);
    outline: none;
}
.hexContainer:focus .open, .hexContainer:focus .open.unblock {
    transform-origin: 50% 0%;
}
.hexContainer:focus .blocked {
    opacity: 1; 
    transform-origin: 50% 0%;
}
.hexContainer.active .open {
    fill: rgba(0, 204, 255, 0.8);
    opacity: 1; 
}
#blockedHexPattern line {
    stroke: #0CF;
    stroke-width: 0.0625rem;
}
#hexGrid .rect {
    transform: rotateX(0deg);   
}

<div id="stationMap" class="display">
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="55 -30 360 360" id="hexGrid">
        <defs>
            <pattern x="0" y="0" height="10" width="10" patternUnits="userSpaceOnUse" id="blockedHexPattern">
                <line x1="0" y1="10" x2="10" y2="0"></line>
            </pattern>
        </defs> <a id="hex0-0" class="hexContainer">
        <polygon class="hex open" points="81.96152422706632,45 55.98076211353316,60 30,45 30.000000000000004,14.999999999999996 55.98076211353315,0 81.96152422706632,14.999999999999986"></polygon>
    </a>
 <a id="hex0-2" class="hexContainer">
        <polygon class="hex blocked" points="185.88457268119896,45 159.9038105676658,60 133.92304845413264,45 133.92304845413264,14.999999999999996 159.9038105676658,0 185.88457268119896,14.999999999999986" fill="url(#blockedHexPattern)"></polygon>
    </a>
 <a id="hex0-6" class="hexContainer">
        <polygon class="hex blocked" points="393.7306695894642,45 367.749907475931,60 341.76914536239786,45 341.76914536239786,14.999999999999996 367.749907475931,0 393.7306695894642,14.999999999999986" fill="url(#blockedHexPattern)"></polygon>
    </a>
 <a id="hex0-7" class="hexContainer">
        <polygon class="hex blocked" points="445.6921938165305,45 419.71143170299734,60 393.7306695894642,45 393.7306695894642,14.999999999999996 419.71143170299734,0 445.6921938165305,14.999999999999986" fill="url(#blockedHexPattern)"></polygon>
    </a>
 <a id="hex1-0" class="hexContainer">
        <polygon class="hex open" points="55.98076211353316,90 30.000000000000004,105 4.01923788646684,90 4.019237886466843,60 29.999999999999993,45 55.98076211353315,59.999999999999986"></polygon>
        <rect class="rect" fill="red" x="5" y="67.5" width="50" height="40"/>
    </a>
 <a id="hex1-3" class="hexContainer">
        <polygon class="hex blocked" points="211.8653347947321,90 185.88457268119893,105 159.90381056766577,90 159.90381056766577,60 185.88457268119893,45 211.8653347947321,59.999999999999986" fill="url(#blockedHexPattern)"></polygon>
    </a>
 <a id="hex1-4" class="hexContainer">
        <polygon class="hex open" points="263.82685902179844,90 237.84609690826525,105 211.8653347947321,90 211.8653347947321,60 237.84609690826525,45 263.8268590217984,59.999999999999986"></polygon>
    </a>
 <a id="hex1-5" class="hexContainer">
        <polygon class="hex open" points="315.7883832488647,90 289.80762113533154,105 263.8268590217984,90 263.8268590217984,60 289.80762113533154,45 315.7883832488647,59.999999999999986"></polygon>
    </a>
 <a id="hex1-6" class="hexContainer">
        <polygon class="hex open" points="367.749907475931,90 341.76914536239786,105 315.7883832488647,90 315.7883832488647,60 341.76914536239786,45 367.749907475931,59.999999999999986"></polygon>
    </a>
 <a id="hex1-7" class="hexContainer">
        <polygon class="hex open" points="419.71143170299734,90 393.7306695894642,105 367.749907475931,90 367.749907475931,60 393.7306695894642,45 419.71143170299734,59.999999999999986"></polygon>
        <rect class="rect" fill="red" x="369" y="67.5" width="50" height="40"/>
    </a>
 <a id="hex2-0" class="hexContainer">
        <polygon class="hex open" points="81.96152422706632,134.99999999999997 55.98076211353316,150 30,134.99999999999997 30.000000000000004,104.99999999999999 55.98076211353315,89.99999999999999 81.96152422706632,104.99999999999997"></polygon>
    </a>
 <a id="hex2-2" class="hexContainer">
        <polygon class="hex blocked" points="185.88457268119896,134.99999999999997 159.9038105676658,150 133.92304845413264,134.99999999999997 133.92304845413264,104.99999999999999 159.9038105676658,89.99999999999999 185.88457268119896,104.99999999999997" fill="url(#blockedHexPattern)"></polygon>
    </a>
 <a id="hex2-3" class="hexContainer">
        <polygon class="hex open" points="237.84609690826525,134.99999999999997 211.8653347947321,150 185.88457268119893,134.99999999999997 185.88457268119893,104.99999999999999 211.8653347947321,89.99999999999999 237.84609690826525,104.99999999999997"></polygon>
    </a>
 <a id="hex2-4" class="hexContainer">
        <polygon class="hex open" points="289.80762113533154,134.99999999999997 263.8268590217984,150 237.84609690826522,134.99999999999997 237.84609690826522,104.99999999999999 263.8268590217984,89.99999999999999 289.80762113533154,104.99999999999997"></polygon>
    </a>
 <a id="hex2-5" class="hexContainer">
        <polygon class="hex open" points="341.76914536239786,134.99999999999997 315.7883832488647,150 289.80762113533154,134.99999999999997 289.80762113533154,104.99999999999999 315.7883832488647,89.99999999999999 341.76914536239786,104.99999999999997"></polygon>
    </a>
 <a id="hex2-6" class="hexContainer">
        <polygon class="hex open" points="393.7306695894642,134.99999999999997 367.749907475931,150 341.76914536239786,134.99999999999997 341.76914536239786,104.99999999999999 367.749907475931,89.99999999999999 393.7306695894642,104.99999999999997"></polygon>
    </a>
 <a id="hex2-7" class="hexContainer">
        <polygon class="hex open" points="445.6921938165305,134.99999999999997 419.71143170299734,150 393.7306695894642,134.99999999999997 393.7306695894642,104.99999999999999 419.71143170299734,89.99999999999999 445.6921938165305,104.99999999999997"></polygon>
    </a>
 <a id="hex3-0" class="hexContainer">
        <polygon class="hex open" points="55.98076211353316,179.99999999999997 30.000000000000004,194.99999999999997 4.01923788646684,179.99999999999997 4.019237886466843,149.99999999999997 29.999999999999993,134.99999999999997 55.98076211353315,149.99999999999994"></polygon>
    </a>
 <a id="hex3-3" class="hexContainer">
        <polygon class="hex blocked" points="211.8653347947321,179.99999999999997 185.88457268119893,194.99999999999997 159.90381056766577,179.99999999999997 159.90381056766577,149.99999999999997 185.88457268119893,134.99999999999997 211.8653347947321,149.99999999999994" fill="url(#blockedHexPattern)"></polygon>
    </a>
 <a id="hex3-5" class="hexContainer">
        <polygon class="hex blocked" points="315.7883832488647,179.99999999999997 289.80762113533154,194.99999999999997 263.8268590217984,179.99999999999997 263.8268590217984,149.99999999999997 289.80762113533154,134.99999999999997 315.7883832488647,149.99999999999994" fill="url(#blockedHexPattern)"></polygon>
    </a>
 <a id="hex3-7" class="hexContainer">
        <polygon class="hex blocked" points="419.71143170299734,179.99999999999997 393.7306695894642,194.99999999999997 367.749907475931,179.99999999999997 367.749907475931,149.99999999999997 393.7306695894642,134.99999999999997 419.71143170299734,149.99999999999994" fill="url(#blockedHexPattern)"></polygon>
    </a>
 <a id="hex4-0" class="hexContainer">
        <polygon class="hex open" points="81.96152422706632,224.99999999999997 55.98076211353316,239.99999999999997 30,224.99999999999997 30.000000000000004,194.99999999999997 55.98076211353315,179.99999999999997 81.96152422706632,194.99999999999994"></polygon>
    </a>
 <a id="hex4-1" class="hexContainer">
        <polygon class="hex blocked" points="133.92304845413264,224.99999999999997 107.94228634059948,239.99999999999997 81.96152422706632,224.99999999999997 81.96152422706632,194.99999999999997 107.94228634059948,179.99999999999997 133.92304845413264,194.99999999999994" fill="url(#blockedHexPattern)"></polygon>
    </a>
 <a id="hex4-2" class="hexContainer">
        <polygon class="hex blocked" points="185.88457268119896,224.99999999999997 159.9038105676658,239.99999999999997 133.92304845413264,224.99999999999997 133.92304845413264,194.99999999999997 159.9038105676658,179.99999999999997 185.88457268119896,194.99999999999994" fill="url(#blockedHexPattern)"></polygon>
    </a>
 <a id="hex4-3" class="hexContainer">
        <polygon class="hex blocked" points="237.84609690826525,224.99999999999997 211.8653347947321,239.99999999999997 185.88457268119893,224.99999999999997 185.88457268119893,194.99999999999997 211.8653347947321,179.99999999999997 237.84609690826525,194.99999999999994" fill="url(#blockedHexPattern)"></polygon>
    </a>
 <a id="hex4-4" class="hexContainer">
        <polygon class="hex open" points="289.80762113533154,224.99999999999997 263.8268590217984,239.99999999999997 237.84609690826522,224.99999999999997 237.84609690826522,194.99999999999997 263.8268590217984,179.99999999999997 289.80762113533154,194.99999999999994"></polygon>
    </a>
 <a id="hex4-5" class="hexContainer">
        <polygon class="hex open" points="341.76914536239786,224.99999999999997 315.7883832488647,239.99999999999997 289.80762113533154,224.99999999999997 289.80762113533154,194.99999999999997 315.7883832488647,179.99999999999997 341.76914536239786,194.99999999999994"></polygon>
    </a>
 <a id="hex4-6" class="hexContainer">
        <polygon class="hex open" points="393.7306695894642,224.99999999999997 367.749907475931,239.99999999999997 341.76914536239786,224.99999999999997 341.76914536239786,194.99999999999997 367.749907475931,179.99999999999997 393.7306695894642,194.99999999999994"></polygon>
    </a>

    </svg>
</div>

fiddle

总结：

1. 我们将 svg 元素倾斜到正常位置；

2. 获取图像/框在未转换场景中的放置位置；

3. 在svg层下创建一个相同尺寸的新元素；

4. 制作元素以替换新元素上的图像框（使用从第 2 点获取的坐标）；

5. 转换添加translateY(-100%)作为第一个值的新元素，使其与svg重叠；

6. 将 svg 元素转换为添加元素的相同值（显然没有translateY(-100%)）。

---

为了在 svg 元素上保持悬停效果，我们可以玩堆叠内容（但它是有限的 - example）。

仅在最新的 chrome 上测试 - 缺少任何其他浏览器支持。