移動一個SVG掩碼

Question

我已經有一些SVG放在一起，但我一直在努力移動一個我創建的掩碼。這是最簡單的用一個例子來說明：

function createFog(imageUrl) { 
 
    const mapImage = new Image(); 
 

 
    mapImage.onload = function() { 
 
    // Grab the dimensions of the map 
 
    const width = this.width; 
 
    const height = this.height; 
 

 
    d3.selectAll(".full-size").attr({ 
 
     height, 
 
     width 
 
    }); 
 
    d3.select("#map").attr("xlink:href", imageUrl); 
 
    }; 
 

 
    mapImage.src = imageUrl; 
 
} 
 
createFog("https://oneinchsquare.files.wordpress.com/2015/01/greenest_transparent_grid.jpg");

img, svg, canvas { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
} 
 

 
html, body { 
 
    overflow: hidden; 
 
    background: black; 
 
} 
 

 
#interaction { 
 
    fill: none; 
 
    pointer-events: all; 
 
} 
 

 
#light { 
 
    opacity: 0.9; 
 
} 
 

 
#fog { 
 
    opacity: 0; 
 
    fill: black; 
 
} 
 

 
.explore-outline { 
 
    fill: none; 
 
    stroke: #aaa; 
 
} 
 

 
.torch-outline { 
 
    fill: none; 
 
    stroke: #ff9800; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.3.13/d3.min.js"></script> 
 
<svg class="full-size"> 
 
     <g id="view" transform="scale(0.25)"> 
 
      <defs> 
 
       <radialGradient id="radGrad" class="full-size" r="0.31"> 
 
       <stop offset="0%" stop-color="black" /> 
 
       <stop offset="50%" stop-color="#aaa" /> 
 
       <stop offset="60%" stop-color="#bbb" /> 
 
       <stop offset="70%" stop-color="#ccc" /> 
 
       <stop offset="80%" stop-color="#ddd" /> 
 
       <stop offset="90%" stop-color="#eee" /> 
 
       <stop offset="100%" stop-color="white" /> 
 
       </radialGradient> 
 
       <mask class="full-size" id="explored"> 
 
        <rect class="full-size" id="unexplored" x="0" y="0" width="500" height="500" fill="white"/> 
 
        <g id="explored"></g> 
 
       </mask> 
 
       <mask id="hole"> 
 
       <rect id="mask" class="full-size" x="0" y="0" width="500" height="500" fill="url(#radGrad)"></rect> 
 
       </mask> 
 
      </defs> 
 
      <image class="full-size" id="map" x="0" y="0"/> 
 
      <rect class="full-size" id="light" x="0" y="0" width="500" height="500" mask="url(#hole)"></rect> 
 
      <rect class="full-size" id="fog" x="0" y="0" width="500" height="500" mask="url(#explored)"></rect> 
 
     </g> 
 
     <rect id="interaction" class="full-size" x="0" y="0"></rect> 
 
     </svg>

我希望能夠做的就是當有人點擊的背景下，照明移動到該點移動的「光」的效果。這種光效果實際上是通過在黑暗層的中間切割一個孔而產生的。從這個角度來看，我不需要代碼的幫助，更多的是我嘗試在SVG中做的事情似乎沒有產生我想要的效果。我想我可以設置cx或cy但他們似乎沒有做任何事情。

這給我留下了另一個我試過的選項 - 翻譯#mask或#light元素，但是這樣做會留下一部分地圖。我認爲我可以將這些圖層放大以彌補 - 但不幸的是，這樣做可以擴大這個洞，我不想這麼做。

無論如何我可以有效地移動這個「洞」嗎？

Answer 1

我假設我可以設置cx或cy，但他們似乎沒有做任何事情。

當cx和cy被改變時，它似乎工作正常。

function createFog(imageUrl) { 
 
    const mapImage = new Image(); 
 

 
    mapImage.onload = function() { 
 
    // Grab the dimensions of the map 
 
    const width = this.width; 
 
    const height = this.height; 
 

 
    d3.selectAll(".full-size").attr({ 
 
     height, 
 
     width 
 
    }); 
 
    d3.select("#map").attr("xlink:href", imageUrl); 
 
    }; 
 

 
    mapImage.src = imageUrl; 
 
} 
 
createFog("https://oneinchsquare.files.wordpress.com/2015/01/greenest_transparent_grid.jpg");

img, svg, canvas { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
} 
 

 
html, body { 
 
    overflow: hidden; 
 
    background: black; 
 
} 
 

 
#interaction { 
 
    fill: none; 
 
    pointer-events: all; 
 
} 
 

 
#light { 
 
    opacity: 0.9; 
 
} 
 

 
#fog { 
 
    opacity: 0; 
 
    fill: black; 
 
} 
 

 
.explore-outline { 
 
    fill: none; 
 
    stroke: #aaa; 
 
} 
 

 
.torch-outline { 
 
    fill: none; 
 
    stroke: #ff9800; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.3.13/d3.min.js"></script> 
 
<svg class="full-size"> 
 
     <g id="view" transform="scale(0.25)"> 
 
      <defs> 
 
       <radialGradient id="radGrad" class="full-size" r="0.31" 
 
           cx="0.3" cy="0.7"> 
 
       <stop offset="0%" stop-color="black" /> 
 
       <stop offset="50%" stop-color="#aaa" /> 
 
       <stop offset="60%" stop-color="#bbb" /> 
 
       <stop offset="70%" stop-color="#ccc" /> 
 
       <stop offset="80%" stop-color="#ddd" /> 
 
       <stop offset="90%" stop-color="#eee" /> 
 
       <stop offset="100%" stop-color="white" /> 
 
       </radialGradient> 
 
       <mask class="full-size" id="explored"> 
 
        <rect class="full-size" id="unexplored" x="0" y="0" width="500" height="500" fill="white"/> 
 
        <g id="explored"></g> 
 
       </mask> 
 
       <mask id="hole"> 
 
       <rect id="mask" class="full-size" x="0" y="0" width="500" height="500" fill="url(#radGrad)"></rect> 
 
       </mask> 
 
      </defs> 
 
      <image class="full-size" id="map" x="0" y="0"/> 
 
      <rect class="full-size" id="light" x="0" y="0" width="500" height="500" mask="url(#hole)"></rect> 
 
      <rect class="full-size" id="fog" x="0" y="0" width="500" height="500" mask="url(#explored)"></rect> 
 
     </g> 
 
     <rect id="interaction" class="full-size" x="0" y="0"></rect> 
 
     </svg>