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でやろうとしたことは、私が望む効果を生み出していないようです。

radialGradientを移動できないようですが、私はcxまたはcyを設定できると思っていましたが、何もしないようです。

これは私が試したもう1つの選択肢、つまり#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>